ant-design-vue表格Table行内新增、编辑、删除

功能场景：

ant-design-vue表格Table进行单元格内新增、编辑、删除等操作

如图所示：

实现代码

<template><div><a-button type="primary":disabled="disabled" @click="add"/><a-table
      :columns="columns":data-source="dataSource"
      row-key="serialNumber":loading="loading":pagination="false":scroll="{ y: 500 }"><template slot="name" slot-scope="text, record"><a-input v-if="record.id === editingKey" v-model="record.name":max-length="50"/><span v-else>{{ text }}</span></template><template slot="action" slot-scope="text, record"><span v-if="record.id === editingKey"><a href="javascript:" @click="save(record)">保存</a><a-divider type="vertical"/><a href="javascript:" @click="cancel(record.id)">取消</a></span><span v-else><a href="javascript:":disabled="disabled" @click="edit(record.id)"> 编辑 </a><a-divider type="vertical"/><a href="javascript:":disabled="disabled" @click="del(record.id)"> 删除 </a></span></template></a-table></div></template>

<script>import{ cloneDeep }from'lodash';const columns =[{title:'序号',dataIndex:'serialNumber'},{title:'名称',dataIndex:'name',width:250,scopedSlots:{customRender:'name'}},{title:'操作',dataIndex:'action',scopedSlots:{customRender:'action'}}];exportdefault{data(){return{
      columns,dataSource:[],cacheData:[],loading:false,editingKey:'',disabled:false,addId:''};},mounted(){},methods:{getList(){// ...获取列表数据},add(){this.addId =`new${this.dataSource.length +1}`;let newObj ={id:this.addId,serialNumber:this.dataSource.length +1,name:''};this.dataSource.push(newObj);this.edit(newObj.id);},edit(id){this.cacheData =cloneDeep(this.dataSource);this.editingKey = id;this.disabled =true;},asyncsave(record){if(!record.name){this.$message.error('请输入名称');}else{let params =cloneDeep(record);if(params.id.startsWith('new')){// 调用新增接口}else{// 调用编辑接口}this.$message.success('保存成功');this.editingKey ='';this.disabled =false;this.getList();}},cancel(){// 新增若取消则pop最后一条，编辑若取消用缓存cacheData覆盖const idx =this.dataSource.findIndex(item=> item.id ===this.addId);if(idx >=0){this.dataSource.pop();this.cacheData.pop();}this.dataSource =this.cacheData;this.editingKey ='';this.disabled =false;},// 删除asyncdel(id){this.$confirm({title:'确认删除吗？',onOk:async()=>{// ... 调删除APIthis.$message.success('删除成功');this.getList();}});}}};</script>