使用Vue3 和 antd table组件，分页获取数据，实现跨页多选

实现跨页多选需要记录选中的数据的ID，可以使用Vue的Reactive响应式对象来进行数据绑定和监听。具体实现步骤如下：

1. 定义一个空数组selected，用来存储选中的数据的ID。

import { reactive } from 'vue';

const state = reactive({
  selected: []
});

2. 在表格的每一行中添加一个多选框，绑定一个change事件，根据选中状态添加或删除选中的数据的ID。

<template>
  <a-table :dataSource="data" :columns="columns">
    <template #selection="{row}">
      <a-checkbox v-model:checked="isSelected(row.id)" @change="handleSelect(row.id, $event.target.checked)"></a-checkbox>
    </template>
  </a-table>
</template>

const handleSelect = (id, checked) => {
  if (checked) {
    state.selected.push(id);
  } else {
    state.selected.splice(state.selected.indexOf(id), 1);
  }
};

3. 在表格的分页组件中添加一个自定义的选中项数量显示组件，根据selected数组的长度来显示选中项的数量。

<template>
  <div>
    <a-pagination :total="total" :current="current" @change="handleChange"></a-pagination>
    <span>已选中 {{ selected.length }} 项</span>
  </div>
</template>

4. 在分页组件的change事件中，重新加载当前页的数据时，需要将之前选中的数据的ID与当前页的数据进行比对，保留选中状态。

const handleChange = (page, pageSize) => {
  // 获取当前页的数据
  const newData = fetchData(page, pageSize);
  // 比对选中状态
  const selectedIds = new Set(state.selected);
  newData.forEach(item => {
    if (selectedIds.has(item.id)) {
      item.selected = true;
    }
  });
  // 更新表格数据
  state.data = newData;
};

这样就可以实现跨页多选了。