Vue Ant Design Table: 保留分页前数据 - selectionRows 和 selectedRowKeys

<p>&quot;<template>\n  <div>\n    &lt;a-table\n      ref=&quot;table&quot;\n      size=&quot;middle&quot;\n      bordered\n      rowKey=&quot;id&quot;\n      :columns=&quot;columns&quot;\n      :dataSource=&quot;dataSource&quot;\n      :pagination=&quot;ipagination&quot;\n      :loading=&quot;loading&quot;\n      :rowSelection=&quot;rowSelection&quot;\n      class=&quot;j-table-force-nowrap&quot;\n      @change=&quot;handleTableChange&quot;\n    &gt;</a-table>\n  </div>\n</template>\n\n<script>\n export default {\n  data() {\n    return {\n      columns: [], // 表格列配置\n      dataSource: [], // 表格数据源\n      ipagination: {}, // 分页配置\n      loading: false, // 加载状态\n      rowSelection: {\n        selectedRowKeys: [], // 选中的行的key\n        onChange: this.onSelectChange, // 选择项发生变化时的回调\n      },\n      allSelectedRows: [], // 存储所有选中的行数据\n    };\n  },\n  methods: {\n    handleTableChange() {\n      // 分页、排序、筛选变化时的回调\n      // 在这里可以更新 dataSource\n    },\n    onSelectChange(selectedRowKeys, selectionRows) {\n      // 选中项发生变化时的回调\n      // 在这里将选中的行的数据保存到组件的属性中\n      this.rowSelection.selectedRowKeys = selectedRowKeys;\n      this.allSelectedRows = selectionRows; // 更新所有选中的行数据\n    },\n  },\n};\n</script>\n&quot;</p>