这里的问题是由于虚拟dom渲染的时候会进行节点对比,如果不添加id的话会默认用index,这样我想学前端的话知道v-for中key的作用就是这个
因此首先在<el-table>标签添加属性 :row-key
<el-table :data="tableData" @cell-dblclick="tableDbEdit" :row-key="getRowKey" style="width: 100%" border>
<el-table-column prop="number" label="服务件数">
</el-table-column>
<el-table-column prop="total" label="总额(¥)">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<!-- <el-button type="primary" plain>删除</el-button> -->
<a-popconfirm title="你确定要删除吗?" ok-text="确 定" cancel-text="取 消" @confirm="deleteTr(scope)"
placement="topRight">
<img src="../../assets/imgs/delete-b.svg" alt="" style="cursor: pointer;">
</a-popconfirm>
</template>
</el-table-column>
</el-table>
添加之后我们肯定是要绑定数据的
<el-table>标签绑定的data是这样一个数组 [{id:0},{id:1},{id:2}]
而这个数组每一项的对象对应的则是下面methods ===> getRowKey的参数
然后id是不是呼应上了,你再试试就对了
data(){
return {
tableData: [{
id: 0,
number: '',
total: ''
},]
}
},
methods: {
getRowKey (row) {
return row.id
},
deleteTr (scope) {
this.tableData.splice(scope.$index, 1)
},
}
el-table属性的作用你可以仔细去看看,理解理解el-table参考文档