实现在columns中的简称中三个
值进行编辑和新增<template> <div> <a-table :pagination="false" :columns="columns" :dataSource="dataSource"> //循环展示数据或input输入框 <template v-for="col in ['abbreviation', 'fullName', 'nodes']" :slot="col" slot-scope="text,
record, index" > <div :key="col"> <a-input v-if="editableData[
record.key]" v-model="editableData[
record.key][col]" /> <template v-else>{{ text }}</template> </div> </template> //操作 <template slot="operation" slot-scope="text,
record, index"> <span v-if="editableData[
record.key]"> <a-icon type="check" @
click="save(
record.key)" /> </span> <span v-else> <a-icon type="delete" @
click="deleteItem(
record.key)" /> <a-icon type="edit" @
click="edit(
record.key)" /> <a-icon type="plus" v-if="index==dataSource.length-1" @
click="addItem(
record.key)" /> </span> </template> </a-table> </div> </template> <script> import { cloneDeep } from "lodash"; export default { data() { return { editableData: [], //正在编辑的数组 columns: [ { title: "简称", dataIndex: "abbreviation", scopedSlots: { customRender: "abbreviation" } }, { title: "全称", dataIndex: "fullName", scopedSlots: { customRender: "fullName" } }, { title: "来源", dataIndex: "nodes", scopedSlots: { customRender: "nodes" } }, { title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" } } ], //表格数据 dataSource: [ { key: 0, abbreviation: "简称1", fullName: "全称1", nodes: "来源1" }, { key: 1, abbreviation: "简称2", fullName: "全称2", nodes: "来源2" }, { key: 2, abbreviation: "简称3", fullName: "全称3", nodes: "来源3" }, { key: 3, abbreviation: "简称14", fullName: "全称14", nodes: "来源14" } ] }; }, components: {}, props: ["tableDatas"], watch: {}, updated() {}, created() {}, methods: { addItem(key) { let item = { key: key + 1, abbreviation: "", fullName: "", nodes: "" }; this.dataSource.splice(key + 1, 0, item); this.$set(this.editableData, key + 1, item); }, deleteItem(key) { this.dataSource = this.dataSource.filter(item => item.key !== key); }, edit(key) { let editItem = cloneDeep( this.dataSource.filter(item => key === item.key)[0] ); this.$set(this.editableData, key, editItem); }, save(key) { Object.assign( this.dataSource.filter(item => key === item.key)[0], this.editableData[key] ); this.$set(this.editableData, key, null); } } }; </script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
