vue3+ant design vue带勾选表格的坑，记录一下

 1、效果图

2、代码

<a-table
//在table中，columns和data-source里的数据值都需要指定key值，对于data-source默认将每列数据的key作为唯一的标识，如果你的数据没有这个属性，务必使用rowKey来指定数据列的主键，否则会出现无法选中或一下子全选中的情况
   :rowKey="(record) => record.id"
//选中需要用到row-selection参数，需要设置该参数下的selectedRowKeys和onChange
selectedRowKeys 代表选中的项的id，是一个数组形式
onChange 代表选中项发生变化的回调，有两个参数第一个是选中的id，第二个是选中的项内容，注意要将第一个选中的id赋值给selectedRowKeys，否则会选中不了。
   :row-selection="{ selectedRowKeys: id, onChange: onRowChange }"
   :loading="loading"
   :columns="columns"
   :data-source="tableData"
>
    <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
           <a-button type="link" @click="view(record)">查看</a-button>
        </template>
    </template>
</a-table>

const loading = ref(false);
const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 120,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      width: 160,
    },
];
//表格数据
const tableData = ref([
    {
      id: 1,
      name: '张三',
    },
    {
      id: 2,
      name: '张三',
    },
    {
      id: 3,
      name: '张三',
    },
]);
//选中项发生变化的回调，有两个参数第一个是选中的id，第二个是选中的项内容，注意要将第一个选中的id赋值给selectedRowKeys，否则会选中不了。
const onRowChange = (selectedRowKeys, selectedRows) => {
    console.log('指定的唯一key值', selectedRowKeys, '选中行数据', selectedRows);
};