vue项目中 Ant Design的表格组件在表格外部设置一个全选按钮控制表格的全选/反选

可以通过在表格外部添加一个复选框来实现全选/反选功能，具体实现如下：

<template>
  <div>
    <a-checkbox v-model="allSelected" @change="handleAllSelectedChange">全选</a-checkbox>
    <a-table :columns="columns" :dataSource="dataSource" :rowSelection="rowSelection"></a-table>
  </div>
</template>

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

export default {
  components: {
    ATable: Table,
    ACheckbox: Checkbox,
  },
  data() {
    return {
      allSelected: false,
      dataSource: [
        { id: 1, name: 'John Brown', age: 18 },
        { id: 2, name: 'Jim Green', age: 24 },
        { id: 3, name: 'Joe Black', age: 30 },
      ],
      selectedRowKeys: [],
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
        },
        {
          title: '姓名',
          dataIndex: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
        },
      ],
    };
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.handleSelectedRowKeysChange,
      };
    },
  },
  methods: {
    handleSelectedRowKeysChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    handleAllSelectedChange(checked) {
      if (checked) {
        this.selectedRowKeys = this.dataSource.map(item => item.id);
      } else {
        this.selectedRowKeys = [];
      }
    },
  },
};
</script>

在上面的代码中，我们在表格外部添加了一个复选框，并绑定了`allSelected`属性来控制它的选中状态。接着，我们在表格的`rowSelection`属性中设置了`selectedRowKeys`和`onChange`，其中`selectedRowKeys`绑定到了`selectedRowKeys`属性，`onChange`绑定到了`handleSelectedRowKeysChange`方法上。当表格中的行被选中或取消选中时，`selectedRowKeys`会发生变化，`handleSelectedRowKeysChange`方法会被调用。

当全选按钮被选中或取消选中时，我们可以通过`handleAllSelectedChange`方法来实现全选/反选功能。如果全选按钮被选中，则将`selectedRowKeys`设置为所有行的`id`，否则将`selectedRowKeys`清空。这样，就实现了全选/反选功能。