a-table 批量删除功能:
1.a-table多选删除功能:
<a-table
:rowKey="(record) => record.id"
:columns="tableData.columns"
:data-source="tableData.data"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:pagination="false"
>
</a-table>
js部分:
用onSelectChange方法把选中的ID存到selectedRowKeys中,再发送remove请求。
rowKey使用唯一标识id,如果是有层级关系的表格使用index会有bug产生,故有id就绑定id。
export default {
data() {
return {
// 用来存选中行id
selectedRowKeys: [],
}
},
methods: {
onSelectChange(selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys; // 将选中行的id保存到selectedRowKeys中
},
onDeleteSelected() {
if (this.selectedRowKeys.length > 0) {
this.$confirm({
title: "提示",
content: "该操作将永久删除该记录且不可恢复, 是否继续?",
okText: "确定",
cancelText: "取消",
onOk: () => {
remove({
ids: this.selectedRowKeys
}).then((res) => {
if (res && res.data) {
this.$message.success("删除成功");
this.queryTableData(); // 查询
}
});
},
onCancel: () => {
this.$message.warning("已取消删除");
}
});
}
},
}
}