Anti Desgin Vue 实现 表格可编辑、新增、删除功能

1、效果图
新增：


删除：


修改：

代码：

<template><div><button @click="add">添加</button><span style="margin-left: 8px"><template v-if="hasSelected">{{ `Selected ${selectedRowKeys.length} items` }}</template></span><a-table:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }":columns="columns":data-source="data"bordered><template v-for="col in ['name','barcode','price','num','amount','type','standard']" :slot="col" slot-scope="text, record"><div :key="col"><a-inputv-if="record.editable"style="margin: -5px 0":value="text"@change="e => handleChange(e.target.value, record.key, col)"/><template v-else>{{ text }}</template></div></template><template slot="operation" slot-scope="text, record"><div class="editable-row-operations"><span v-if="record.editable"><a @click="() => save(record.key)">保存</a><a-popconfirmtitle="确定取消?"okText="确定"cancelText="取消"@confirm="() => cancel(record.key)"><a>取消</a></a-popconfirm></span><span v-else><a :disabled="editingKey !== ''" @click="() => edit(record.key)">修改</a><a  @click="() =>deleteItem(record.key)">删除</a></span></div></template></a-table></div>
</template>
<script>
const columns = [{title: "样品名称",dataIndex: "name",// width: "25%",align: 'center',scopedSlots: { customRender: "name" }},{title: '规格型号',dataIndex: 'barcode',align: 'center',scopedSlots: { customRender: "barcode" }},{title: '数量',dataIndex: 'price',align: 'center',scopedSlots: { customRender: "price" }},{title: '生成批号',dataIndex: 'num',align: 'center',scopedSlots: { customRender: "num" }},{title: '生产单位',dataIndex: 'amount',align: 'center',scopedSlots: { customRender: "amount" }},{title: '检验类别',dataIndex: 'type',align: 'center',scopedSlots: { customRender: "type" }},{title: '试验标准',dataIndex: 'standard',align: 'center',scopedSlots: { customRender: "standard" }},{title: "操作",dataIndex: "operation",align: 'center',scopedSlots: { customRender: "operation" }}];let data = [];
// 数组创建时候的下标
var numbe = 0;
export default {data() {this.cacheData = data.map(item => ({ ...item }));return {data,columns,editingKey: "",selectedRowKeys: []};},methods: {add() {data.push({key: numbe.toString(),name: "hah",// 规格型号barcode:'E200',price: "1",num: "1",amount: "xxx公司",type: "1",standard: "国家标准",});numbe++;console.log(data);this.cacheData = data.map(item => ({ ...item }));},handleChange(value, key, column) {const newData = [...this.data];const target = newData.filter(item => key === item.key)[0];if (target) {target[column] = value;this.data = newData;}},edit(key) {const newData = [...this.data];const target = newData.filter(item => key === item.key)[0];this.editingKey = key;if (target) {target.editable = true;this.data = newData;}},deleteItem(key){console.log('删除前',this.data);console.log('cacheData',this.cacheData)console.log('删除',key)const newData = [...this.data];this.data = newData.filter(item=>item.key !== key)this.cacheData = this.cacheData.filter(item=>item.key !== key)data=this.dataconsole.log('删除后',this.data);this.editingKey = "";},save(key) {const newData = [...this.data];console.log('newData',newData)const newCacheData = [...this.cacheData];console.log('newCacheData',newCacheData)const target = newData.filter(item => key === item.key)[0];console.log('target',target)const targetCache = newCacheData.filter(item => key === item.key)[0];console.log('targetCache',targetCache)if (target && targetCache) {delete target.editable;this.data = newData;Object.assign(targetCache, target);this.cacheData = newCacheData;}this.editingKey = "";},cancel(key) {const newData = [...this.data];const target = newData.filter(item => key === item.key)[0];this.editingKey = "";if (target) {Object.assign(target,this.cacheData.filter(item => key === item.key)[0]);delete target.editable;this.data = newData;}},onSelectChange(selectedRowKeys) {console.log("selectedRowKeys changed: ", selectedRowKeys);this.selectedRowKeys = selectedRowKeys;}},computed: {hasSelected() {return this.selectedRowKeys.length > 0;}}
};
</script>
<style scoped>
.editable-row-operations a {margin-right: 8px;
}
</style>