-Go服务器开发

在 Vue 3 中使用 Ant Design Vue 的 a-table 实现全选分页功能，可以通过更新 rowSelection 的配置来实现。具体来说，当你选择当前页面的所有行时，你需要记录所有已选择的行，并且能够在切换页面时保持这些选择状态。

下面是一个简单的示例，展示了如何实现全选分页：

<template>
  <a-table
    :columns="columns"
    :data-source="paginatedData"
    :scroll="{ x: columns.reduce((sum, col) => sum + (col.width || 0), 0) > 1800 ? 'max-content' : undefined }"
    :pagination="{
      current: currentPage,
      pageSize: pageSize,
      total: totalRecords,
      onShowSizeChange: handlePageSizeChange,
      onChange: handlePageChange,
      showQuickJumper: true,
      showSizeChanger: true,
      showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
    }"
    :row-selection="rowSelection"
    :row-key="record => record.customerId"
    style="padding: 5px"
    bordered
  />
</template>

<script setup>
import { ref, computed } from 'vue';

const columns = [
  {
    title: 'Customer Name',
    dataIndex: 'customerName',
    width: 200
  },
  {
    title: 'Age',
    dataIndex: 'age',
    width: 100
  },
];

const rawData = [
  { customerId: 1, customerName: 'John Doe', age: 25 },
  { customerId: 2, customerName: 'Jane Smith', age: 30 },
  // Add more data as needed
];

const currentPage = ref(1);
const pageSize = ref(10);
const selectedRowKeys = ref([]);
const totalRecords = ref(rawData.length);

const paginatedData = computed(() => {
   const start = (currentPage.value - 1) * pageSize.value;
   return rawData.slice(start, start + pageSize.value);
});

const rowSelection = {
   selectedRowKeys: selectedRowKeys.value,
   onChange(selectedKeys) {
     selectedRowKeys.value = selectedKeys;
   },
   onSelectAll(selected, selectedRows) {
     if (selected) {
       // 如果选择所有项，将其添加到已选中的行中
       const allSelectedKeys = paginatedData.value.map(item => item.customerId);
       selectedRowKeys.value.push(...allSelectedKeys.filter(key => !selectedRowKeys.value.includes(key)));
     } else {
       // 如果取消选择所有项，从已选中的行中移除它们
       const allSelectedKeys = paginatedData.value.map(item => item.customerId);
       selectedRowKeys.value = selectedRowKeys.value.filter(key => !allSelectedKeys.includes(key));
     }
   }
};

const handlePageSizeChange = (current, size) => {
   pageSize.value = size;
};

const handlePageChange = (page) => {
   currentPage.value = page;

   // 在页面变化时保持所选项的状态，可以根据需求调整逻辑
};

</script>

实现说明

数据分页：使用 computed 属性计算出当前页面的数据 (paginatedData)。
全选逻辑：
- 在 onSelectAll 中，如果用户全选了当前页的数据，则将这些数据的键值（如 customerId）添加到 selectedRowKeys 中。
- 如果用户取消全选，则从 selectedRowKeys 中删除这些键值。
保持状态：可以在翻页的时候，选择状态不会丢失，但是如果需要在不同页面间共享选择状态，需要相应地修改逻辑以适配整个数据集。