antdesignvue table 行选中事件

Ant Design Vue 的 Table 组件提供了 `rowKey` 和 `rowSelection` 属性来处理行选中事件。

首先，在 Table 组件中设置 `rowKey` 属性，指定每行数据的唯一标识，例如：

<a-table :columns="columns" :data-source="dataSource" row-key="id"></a-table>

然后，在 Table 组件中设置 `rowSelection` 属性，指定行选中相关的配置，例如：

<a-table :columns="columns" :data-source="dataSource" row-key="id" :row-selection="rowSelection"></a-table>

其中，`rowSelection` 对象包含以下属性：

- `type`：指定选择类型，可选值为 `checkbox` 和 `radio`。
- `selectedRowKeys`：指定哪些行为选中状态。
- `onChange`：选中状态改变时的回调函数。

例如，以下代码展示了如何在 Table 组件中实现行选中事件：

<template>
  <a-table :columns="columns" :data-source="dataSource" row-key="id" :row-selection="rowSelection">
    <template slot="name" slot-scope="text">{{ text }}</template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age'
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address'
        }
      ],
      dataSource: [
        {
          id: 1,
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park'
        },
        {
          id: 2,
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park'
        },
        {
          id: 3,
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park'
        }
      ],
      rowSelection: {
        type: 'checkbox',
        selectedRowKeys: [],
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(selectedRowKeys, selectedRows);
        }
      }
    };
  }
};
</script>

在以上代码中，我们通过 `rowSelection` 对象设置了行选中相关的配置，当选择状态改变时，会触发 `onChange` 回调函数，我们可以在该函数中处理选中状态改变的逻辑。