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

Ant Design的表格组件在Vue项目中的用法和React项目中有所不同，但是也提供了Checkbox组件和Table组件用于全选控制，可以通过以下步骤实现：

1. 在columns数组中添加一个Checkbox列，设置scopedSlots属性返回Checkbox组件。

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '',
    key: 'checkbox',
    scopedSlots: { customRender: 'checkbox' },
  },
];

2. 在Table组件中添加一个slot属性，设置name为checkbox，返回全选的Checkbox组件。

<template>
  <div>
    <Checkbox v-model="isAllSelected" @change="handleCheckAllChange">Select All</Checkbox>
    <Table :columns="columns" :dataSource="data" :rowSelection="rowSelection">
      <template v-slot:checkbox="{ record }">
        <Checkbox :checked="selectedRowKeys.includes(record.key)" @change="handleCheckboxChange(record)" />
      </template>
    </Table>
  </div>
</template>

3. 在Vue组件中设置selectedRowKeys和isAllSelected属性，以及handleCheckboxChange和handleCheckAllChange方法，用于控制选中的行和全选/反选功能。

data() {
  return {
    columns: [...],
    data: [...],
    selectedRowKeys: [],
    isAllSelected: false,
  };
},
computed: {
  rowSelection() {
    return {
      selectedRowKeys: this.selectedRowKeys,
      onChange: this.handleRowSelectionChange,
    };
  },
},
methods: {
  handleCheckboxChange(record) {
    const rowKey = record.key;
    const selectedRowKeysCopy = [...this.selectedRowKeys];
    const index = selectedRowKeysCopy.indexOf(rowKey);
    if (index >= 0) {
      selectedRowKeysCopy.splice(index, 1);
    } else {
      selectedRowKeysCopy.push(rowKey);
    }
    this.selectedRowKeys = selectedRowKeysCopy;
    this.isAllSelected = this.selectedRowKeys.length === this.data.length;
  },
  handleCheckAllChange(e) {
    if (e.target.checked) {
      this.selectedRowKeys = this.data.map((record) => record.key);
    } else {
      this.selectedRowKeys = [];
    }
    this.isAllSelected = e.target.checked;
  },
  handleRowSelectionChange(selectedRowKeys) {
    this.selectedRowKeys = selectedRowKeys;
    this.isAllSelected = selectedRowKeys.length === this.data.length;
  },
},

这样就可以在表格外部添加一个全选的Checkbox，控制表格的全选/反选功能了。同时也需要注意，在Table组件中添加rowSelection属性，用于控制选中的行。