最近开始使用vxe-table了,多记录,多积累
el-table动态删除当前行和vex-table动态删除当前行
主要说操作列
el-table通过scope.$index获取当前行索引
<el-table-column width="60" label="操作" align="center">
<template slot-scope="scope">
<el-button @click="delColunm(scope.$index,scope.row)" type="text">删除</el-button>
</template>
</el-table-column>
<vxe-column title="操作" width="100">
<template #default="{ row, column, rowIndex, columnIndex }">
<vxe-button type="text" @click="delColunm(rowIndex)">删除</vxe-button>
</template>
</vxe-column>
delColunm(index,row) {
this.tableData.splice(index, 1)
//一定是这个index
},
el-table中的row-key
vue中key作用
key的作用就是更新组件时判断两个节点是否相同。相同就复用,不同就删除旧的创建新的。如果不添加key组件默认都是就地复用,不会删除添加节点,只是改变列表中的文本值。添加key之后,Vue对比节点内容不一致时,就会认为是两个节点,会先删除掉旧节点,然后添加新节点。
例:
el-table没有给每一行添加key时,当我们删除第二行数据时,焦点会自动聚焦在变为第二行的第三行数据按钮上。
原因:
删除一行数据时,Vue会认为我们把2变成了3,把3删除了。所以只会把第二行的数据变成第三行,但是按钮的状态会就地复用。
解决:
给每一行添加一个key,el-table设置row-key
<el-table :row-key="record=>record.id"></el-table>// id为表格数据中的一个属性(唯一),record为每一行数据
<el-table row-key="id"></el-table>// row-key此时不带冒号,绑定值为数据中属性id
注:表格中不建议使用index作为key,删除数据时,索引会自动连续,(1,2,3删除第2,索引会自动变成1,2,而不是1,3)所以Vue仍然会认为删除的是第3项,而不是第2项。