取消选中的复选框表格的数据也删除掉

可以在取消选中的复选框时，同时将该行数据从已选数据中删除。具体实现代码如下：

<template>
  <div>
    <a-button type="primary" @click="handleAdd">添加</a-button>
    <a-table :columns="columns" :data-source="dataSource" row-selection @row-selection-change="handleRowSelectionChange" />
    <a-table :columns="columns" :data-source="selectedData" />
  </div>
</template>

<script>
import { Table, Button } from 'ant-design-vue'

export default {
  components: {
    'a-table': Table,
    'a-button': Button
  },
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age'
        },
        {
          title: '性别',
          dataIndex: 'gender'
        }
      ],
      dataSource: [
        {
          name: '张三',
          age: 18,
          gender: '男'
        },
        {
          name: '李四',
          age: 20,
          gender: '女'
        },
        {
          name: '王五',
          age: 22,
          gender: '男'
        }
      ],
      selectedData: []
    }
  },
  methods: {
    handleAdd() {
      // 将选中的数据 push 到 selectedData 中
      const selectedRows = []
      this.dataSource.forEach(item => {
        if (item.checked) {
          this.selectedData.push(item)
          // 取消勾选状态
          item.checked = false
        } else {
          selectedRows.push(item)
        }
      })
      this.dataSource = selectedRows
    },
    handleRowSelectionChange(selectedRowKeys, selectedRows) {
      // 给选中的数据添加一个 checked 属性
      this.dataSource.forEach(item => {
        if (selectedRowKeys.includes(item.key)) {
          item.checked = true
        } else {
          item.checked = false
        }
      })
    }
  }
}
</script>

在上面的代码中，我们在添加按钮的点击事件中，将选中的数据 push 到 selectedData 中，并取消勾选状态。同时，我们将未选中的行数据赋值给 dataSource，实现删除已取消选中的行数据的功能。