ant design vue2 选中表格复选框的数据 另一个表格显示选中的数据，取消选中，另一个表格也删除

对于 ant design vue2 表格中的复选框选中数据，可以通过监听 `selection-change` 事件来获取当前选中的数据，然后将其保存到一个数组中。例如：

<template>
  <div>
    <a-table :columns="columns" :data-source="dataSource" row-key="id" @selection-change="handleSelectionChange">
      <span slot="selections" slot-scope="{ selectedRowKeys }">
        <a @click="deleteSelectedData" :disabled="selectedRowKeys.length === 0">删除</a>
      </span>
    </a-table>

    <a-table :columns="selectedColumns" :data-source="selectedData" row-key="id"></a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataSource: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 },
      ],
      selectedData: [],
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
        },
        {
          title: '操作',
          slots: { customRender: 'operation' },
        },
      ],
      selectedColumns: [
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
        },
      ],
    };
  },
  methods: {
    handleSelectionChange(selectedRowKeys, selectedRows) {
      this.selectedData = selectedRows;
    },
    deleteSelectedData() {
      this.dataSource = this.dataSource.filter(
        item => !this.selectedData.some(selectedItem => selectedItem.id === item.id),
      );

      this.selectedData = [];
    },
  },
};
</script>

在上面的例子中，我们通过 `selection-change` 事件监听表格的选中状态，并将选中的数据保存到 `selectedData` 数组中。当点击删除按钮时，我们遍历 `dataSource` 数组，并通过 `some` 方法来判断该项是否被选中，如果被选中，则过滤掉该项，并清空 `selectedData` 数组。同时，我们还通过 `selectedColumns` 和 `selectedData` 来展示选中的数据。