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("已取消删除");
          }
        });
      }
    },
  }
}