vue3 antd-vue 超简单方式实现a-table跨页勾选以及解决全选异常的问题

<template>
  <a-table
    :columns="columns"
    :dataSource="data"
    :pagination="pagination"
    @change="handleTableChange"
    :rowSelection="rowSelection"
  >
  </a-table>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const selectedRowKeys = ref([]); // 存储选中行的key
    const selectionRows = ref([]); // 存储选中的行数据
    const pagination = ref({ pageSize: 10, total: 500 }); // 假设总共有500条数据，每页10条
 
    // 模拟的数据源
    const data = ref(new Array(pagination.value.total).fill({}).map((item, index) => ({
      key: `${index}`,
      name: `Edward King ${index}`,
      age: 32,
      address: `London, Park Lane no. ${index}`,
    })));
 
    // 表格列配置
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Age',
        dataIndex: 'age',
      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
    ];
 
    // 处理表格分页变化
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, filters, sorter);
      // 更新分页状态
      pagination.value = pagination;
    };
 
    // 定义行选择配置
    const rowSelection = {
      selectedRowKeys: selectedRowKeys.value,
      onChange: (selectedRowKeys, selectedRows) => {
        selectedRowKeys.value = selectedRowKeys;
        selectionRows.value = selectedRows;
      },
    };
 
    return {
      columns,
      data,
      pagination,
      handleTableChange,
      rowSelection,
      selectedRowKeys,
      selectionRows,
    };
  },
};
</script>

这个代码实例展示了如何在Vue 3和Ant Design Vue中实现一个表格的跨页选择功能。它使用了selectedRowKeys和selectionRows来跟踪选中的行，并通过rowSelection配置来处理选中事件。当分页改变时，handleTableChange会更新分页状态。虽然这个例子是模拟数据，但它展示了如何处理分页和选择状态，这对于实际的数据表格应用是非常有用的。