{"remainingRequest":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\源码\\vue-element-admin-master\\src\\views\\table\\inline-edit-table.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\源码\\vue-element-admin-master\\src\\views\\table\\inline-edit-table.vue","mtime":1649647926000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCB7IGZldGNoTGlzdCB9IGZyb20gJ0AvYXBpL2FydGljbGUnCgpleHBvcnQgZGVmYXVsdCB7CiAgbmFtZTogJ0lubGluZUVkaXRUYWJsZScsCiAgZmlsdGVyczogewogICAgc3RhdHVzRmlsdGVyKHN0YXR1cykgewogICAgICBjb25zdCBzdGF0dXNNYXAgPSB7CiAgICAgICAgcHVibGlzaGVkOiAnc3VjY2VzcycsCiAgICAgICAgZHJhZnQ6ICdpbmZvJywKICAgICAgICBkZWxldGVkOiAnZGFuZ2VyJwogICAgICB9CiAgICAgIHJldHVybiBzdGF0dXNNYXBbc3RhdHVzXQogICAgfQogIH0sCiAgZGF0YSgpIHsKICAgIHJldHVybiB7CiAgICAgIGxpc3Q6IG51bGwsCiAgICAgIGxpc3RMb2FkaW5nOiB0cnVlLAogICAgICBsaXN0UXVlcnk6IHsKICAgICAgICBwYWdlOiAxLAogICAgICAgIGxpbWl0OiAxMAogICAgICB9CiAgICB9CiAgfSwKICBjcmVhdGVkKCkgewogICAgdGhpcy5nZXRMaXN0KCkKICB9LAogIG1ldGhvZHM6IHsKICAgIGFzeW5jIGdldExpc3QoKSB7CiAgICAgIHRoaXMubGlzdExvYWRpbmcgPSB0cnVlCiAgICAgIGNvbnN0IHsgZGF0YSB9ID0gYXdhaXQgZmV0Y2hMaXN0KHRoaXMubGlzdFF1ZXJ5KQogICAgICBjb25zdCBpdGVtcyA9IGRhdGEuaXRlbXMKICAgICAgdGhpcy5saXN0ID0gaXRlbXMubWFwKHYgPT4gewogICAgICAgIHRoaXMuJHNldCh2LCAnZWRpdCcsIGZhbHNlKSAvLyBodHRwczovL3Z1ZWpzLm9yZy92Mi9ndWlkZS9yZWFjdGl2aXR5Lmh0bWwKICAgICAgICB2Lm9yaWdpbmFsVGl0bGUgPSB2LnRpdGxlIC8vICB3aWxsIGJlIHVzZWQgd2hlbiB1c2VyIGNsaWNrIHRoZSBjYW5jZWwgYm90dG9uCiAgICAgICAgcmV0dXJuIHYKICAgICAgfSkKICAgICAgdGhpcy5saXN0TG9hZGluZyA9IGZhbHNlCiAgICB9LAogICAgY2FuY2VsRWRpdChyb3cpIHsKICAgICAgcm93LnRpdGxlID0gcm93Lm9yaWdpbmFsVGl0bGUKICAgICAgcm93LmVkaXQgPSBmYWxzZQogICAgICB0aGlzLiRtZXNzYWdlKHsKICAgICAgICBtZXNzYWdlOiAnVGhlIHRpdGxlIGhhcyBiZWVuIHJlc3RvcmVkIHRvIHRoZSBvcmlnaW5hbCB2YWx1ZScsCiAgICAgICAgdHlwZTogJ3dhcm5pbmcnCiAgICAgIH0pCiAgICB9LAogICAgY29uZmlybUVkaXQocm93KSB7CiAgICAgIHJvdy5lZGl0ID0gZmFsc2UKICAgICAgcm93Lm9yaWdpbmFsVGl0bGUgPSByb3cudGl0bGUKICAgICAgdGhpcy4kbWVzc2FnZSh7CiAgICAgICAgbWVzc2FnZTogJ1RoZSB0aXRsZSBoYXMgYmVlbiBlZGl0ZWQnLAogICAgICAgIHR5cGU6ICdzdWNjZXNzJwogICAgICB9KQogICAgfQogIH0KfQo="},{"version":3,"sources":["inline-edit-table.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"inline-edit-table.vue","sourceRoot":"src/views/table","sourcesContent":["<template>\n <div class=\"app-container\">\n <el-table v-loading=\"listLoading\" :data=\"list\" border fit highlight-current-row style=\"width: 100%\">\n <el-table-column align=\"center\" label=\"ID\" width=\"80\">\n <template slot-scope=\"{row}\">\n <span>{{ row.id }}</span>\n </template>\n </el-table-column>\n\n <el-table-column width=\"180px\" align=\"center\" label=\"Date\">\n <template slot-scope=\"{row}\">\n <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>\n </template>\n </el-table-column>\n\n <el-table-column width=\"120px\" align=\"center\" label=\"Author\">\n <template slot-scope=\"{row}\">\n <span>{{ row.author }}</span>\n </template>\n </el-table-column>\n\n <el-table-column width=\"100px\" label=\"Importance\">\n <template slot-scope=\"{row}\">\n <svg-icon v-for=\"n in + row.importance\" :key=\"n\" icon-class=\"star\" class=\"meta-item__icon\" />\n </template>\n </el-table-column>\n\n <el-table-column class-name=\"status-col\" label=\"Status\" width=\"110\">\n <template slot-scope=\"{row}\">\n <el-tag :type=\"row.status | statusFilter\">\n {{ row.status }}\n </el-tag>\n </template>\n </el-table-column>\n\n <el-table-column min-width=\"300px\" label=\"Title\">\n <template slot-scope=\"{row}\">\n <template v-if=\"row.edit\">\n <el-input v-model=\"row.title\" class=\"edit-input\" size=\"small\" />\n <el-button\n class=\"cancel-btn\"\n size=\"small\"\n icon=\"el-icon-refresh\"\n type=\"warning\"\n @click=\"cancelEdit(row)\"\n >\n cancel\n </el-button>\n </template>\n <span v-else>{{ row.title }}</span>\n </template>\n </el-table-column>\n\n <el-table-column align=\"center\" label=\"Actions\" width=\"120\">\n <template slot-scope=\"{row}\">\n <el-button\n v-if=\"row.edit\"\n type=\"success\"\n size=\"small\"\n icon=\"el-icon-circle-check-outline\"\n @click=\"confirmEdit(row)\"\n >\n Ok\n </el-button>\n <el-button\n v-else\n type=\"primary\"\n size=\"small\"\n icon=\"el-icon-edit\"\n @click=\"row.edit=!row.edit\"\n >\n Edit\n </el-button>\n </template>\n </el-table-column>\n </el-table>\n </div>\n</template>\n\n<script>\nimport { fetchList } from '@/api/article'\n\nexport default {\n name: 'InlineEditTable',\n filters: {\n statusFilter(status) {\n const statusMap = {\n published: 'success',\n draft: 'info',\n deleted: 'danger'\n }\n return statusMap[status]\n }\n },\n data() {\n return {\n list: null,\n listLoading: true,\n listQuery: {\n page: 1,\n limit: 10\n }\n }\n },\n created() {\n this.getList()\n },\n methods: {\n async getList() {\n this.listLoading = true\n const { data } = await fetchList(this.listQuery)\n const items = data.items\n this.list = items.map(v => {\n this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html\n v.originalTitle = v.title // will be used when user click the cancel botton\n return v\n })\n this.listLoading = false\n },\n cancelEdit(row) {\n row.title = row.originalTitle\n row.edit = false\n this.$message({\n message: 'The title has been restored to the original value',\n type: 'warning'\n })\n },\n confirmEdit(row) {\n row.edit = false\n row.originalTitle = row.title\n this.$message({\n message: 'The title has been edited',\n type: 'success'\n })\n }\n }\n}\n</script>\n\n<style scoped>\n.edit-input {\n padding-right: 100px;\n}\n.cancel-btn {\n position: absolute;\n right: 15px;\n top: 10px;\n}\n</style>\n"]}]}
|
