ant design vue 中selectedRows翻页后不保留上一页已选中的数据怎么解决

在 Ant Design Vue 中，`Table` 组件的 `selectedRows` 属性只会保存当前页选中的行数据，翻页后之前选中的行数据会被清空。如果需要在翻页后保留之前选中的行数据，可以使用以下方法：

1. 在 `Table` 组件中添加 `rowSelection` 属性，并设置 `getCheckboxProps` 函数，该函数返回一个对象，用于设置行的 Checkbox 的属性。在该函数中可以设置 Checkbox 的初始状态，以及在翻页后保留之前选中的行数据。

<template>
  <a-table :columns="columns" :dataSource="dataSource" :rowSelection="rowSelection" />
</template>

<script>
export default {
  data() {
    return {
      dataSource: [], // 表格数据源
      selectedRows: [], // 已选中的行数据
      rowSelection: {
        selectedRowKeys: [], // 已选中的行的 key 值
        onChange: this.handleRowSelectionChange,
        getCheckboxProps: record => ({
          // 设置行的 Checkbox 的属性
          checked: this.selectedRows.some(item => item.id === record.id), // 初始状态为已选中的行
          disabled: record.disabled, // 是否禁用 Checkbox
        }),
      },
    };
  },
  methods: {
    handleRowSelectionChange(selectedRowKeys, selectedRows) {
      // 更新已选中的行数据
      this.selectedRows = selectedRows;
      this.rowSelection.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>

2. 在翻页时，保存已选中的行数据，以及更新 `rowSelection` 属性中的 `selectedRowKeys` 和 `selectedRows`。

<template>
  <a-table :columns="columns" :dataSource="dataSource" :rowSelection="rowSelection" @change="handleTableChange" />
</template>

<script>
export default {
  data() {
    return {
      dataSource: [], // 表格数据源
      selectedRows: [], // 已选中的行数据
      rowSelection: {
        selectedRowKeys: [], // 已选中的行的 key 值
        onChange: this.handleRowSelectionChange,
        getCheckboxProps: record => ({
          // 设置行的 Checkbox 的属性
          checked: this.selectedRows.some(item => item.id === record.id), // 初始状态为已选中的行
          disabled: record.disabled, // 是否禁用 Checkbox
        }),
      },
      pagination: {
        current: 1, // 当前页码
        pageSize: 10, // 每页显示条数
        total: 0, // 数据总数
      },
    };
  },
  methods: {
    handleRowSelectionChange(selectedRowKeys, selectedRows) {
      // 更新已选中的行数据
      this.selectedRows = selectedRows;
      this.rowSelection.selectedRowKeys = selectedRowKeys;
    },
    handleTableChange(pagination) {
      // 在翻页时保存已选中的行数据
      this.pagination = pagination;
      this.rowSelection.selectedRowKeys = this.selectedRows.map(item => item.id); // 更新选中的行的 key 值
      this.rowSelection.selectedRows = this.selectedRows; // 更新选中的行数据
    },
  },
};
</script>