<a-table :pagination="false" :columns="columns" :dataSource="dataSource"> <template v-for="col in ['abbreviation', 'fullName', 'nodes']" :slot="col" slot-scope="text, record, index">
<a-input v-if="editableData[record.key]" v-model="editableData[record.key][col]" /> <template v-else>{{ text }}</template>
</template> <template slot="operation" slot-scope="text, record, index">
<a-icon type="check" @click="save(record.key)" /> <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)" /> </template> </a-table>
编辑
</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', 实现一键保存