Ant Design Table 组件 selectedRows 翻页保留选中项

Ant Design Table 组件 selectedRows 翻页后保留选中项

要解决 Ant Design Table 组件 selectedRows 翻页后保留上一页已选中的 items，你可以按照以下步骤进行操作：

1. 在 data 中声明一个 selectedRowKeys 数组，用于存储选中行的 rowKey 值。

data() {
  return {
    selectedRowKeys: [], // 用于存储选中行的 rowKey 值
    // 其他 data 属性...
  }
},

2. 在 onSelectChange 方法中更新 selectedRowKeys 数组，该方法会在选中行发生变化时被调用。

methods: {
  onSelectChange(selectedRowKeys) {
    this.selectedRowKeys = selectedRowKeys;
  },
  // 其他方法...
},

3. 在 handleTableChange 方法中，在翻页时更新 selectedRowKeys 数组。

methods: {
  handleTableChange(pagination) {
    const { current } = pagination;
    // 如果当前页发生变化，则清空选中项
    if (current !== this.ipagination.current) {
      this.selectedRowKeys = [];
    }
    // 更新当前页码
    this.ipagination.current = current;
    // 其他处理逻辑...
  },
  // 其他方法...
},

4. 在 a-table 组件中绑定 selectedRowKeys 和 onChange 属性。

<a-table
  ref='table'
  size='middle'
  bordered
  rowKey='id'
  :columns='columns'
  :dataSource='dataSource'
  :pagination='ipagination'
  :loading='loading'
  :rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
  class='j-table-force-nowrap'
  @change='handleTableChange'
></a-table>

通过以上步骤，当你翻页时，已选中的行将会保留在 selectedRowKeys 数组中，从而实现了 Ant Design Table 组件 selectedRows 翻页后保留上一页已选中的 items。