antd vue的表格组件功能中有一个,添加复选框选择行的功能,可以用来实现批量删除(应用场景之一),但是使用的时候才发现,这个onChange
方法中的selectedRowKeys
有残留。
解决:
<a-table :columns="columns" :data-source="tableData" bordered size="small"
:row-selection="{selectedRowKeys:selectedRowKeys,onChange:rowChange}" :rowKey="(record,index)=>record.logId"></a-table>
:row-selection="{...}"
的绑定,按照官网的选择项配置进行书写(官网例子中那种不太好操作)- 对于绑定的
selectedRowKeys
进行操作(onChange
时候赋值,delete操作执行完毕之后清空) - 一定要将rowKey设置为数据的id,千万不要设置index,否则翻页后会有问题的,且设置为id,复选操作之后拿到的就是要删除数据的id。
data() {
return {
columns: columns,
tableData: null,
selectedRowKeys:[]
}
},
methods: {
rowChange(selectedRowKeys, selectedRows){
//selectedRowKeys,指定选中项的 key 数组(根据这个实现批量删除)
this.selectedRowKeys = selectedRowKeys;
console.log(`selectedRowKeys: ${this.selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
//批量删除功能
async deleteSelected(){
//清空复选框 bug
this.selectedRowKeys = [];
}
}