vue 使用ant design表格全选

要使用 Ant Design 表格的全选功能，你需要在表格的 `columns` 属性中设置一个 `selections` 对象，然后在表格的 `rowSelection` 属性中设置 `type: 'checkbox'` 和 `selectedRowKeys` 属性。以下是一个示例代码：

<template>
  <a-table :columns="columns" :data-source="data" :row-selection="rowSelection"></a-table>
</template>

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

export default {
  components: {
    'a-table': Table,
  },
  data() {
    return {
      columns: [
        {
          title: '',
          key: 'selection',
          width: '50px',
          selections: [
            {
              text: '选择所有行',
              onSelect: (changeableRowKeys) => {
                this.rowSelection.selectedRowKeys = changeableRowKeys;
              },
            },
          ],
          render: (text, record) => {
            return <a-checkbox checked={this.rowSelection.selectedRowKeys.includes(record.key)} />;
          },
        },
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
        },
      ],
      data: [
        {
          key: '1',
          name: '张三',
          age: 18,
        },
        {
          key: '2',
          name: '李四',
          age: 20,
        },
        {
          key: '3',
          name: '王五',
          age: 22,
        },
      ],
      rowSelection: {
        type: 'checkbox',
        selectedRowKeys: [],
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(selectedRowKeys, selectedRows);
        },
      },
    };
  },
};
</script>

在上面的代码中，我们在 `columns` 中设置了一个 `selection` 列，它渲染为一个复选框，同时定义了一个 `selections` 对象，它只包含了一个选择所有行的选项。在 `rowSelection` 中，我们设置了 `type: 'checkbox'` 表示使用复选框进行选择，并且在 `selectedRowKeys` 中维护了选中的行的 `key` 值数组。当用户点击选择所有行的选项时，我们通过 `onSelect` 回调函数将所有行的 `key` 值设置为选中的行的 `key` 值。在表格的 `render` 函数中，我们根据当前行的 `key` 值是否在 `selectedRowKeys` 数组中来决定复选框是否选中。当用户选择或取消选择行时，我们调用 `onChange` 回调函数来更新选中的行的 `key` 值数组。