要解决antd Table组件selectedRows翻页后保留上一页已选中的items,可以使用以下步骤:

  1. 在父组件中维护一个selectedRows的状态,用于保存选中的行数据。
  2. 在Table组件中,通过rowSelection属性来设置选择模式,并传入一个对象,其中selectedRowKeys属性绑定到selectedRows的keys值。
  3. 在onSelectChange事件中,更新selectedRows的状态。
  4. 在分页器的onChange事件中,获取当前页的选中项的keys,并过滤出上一页已选中的项,将它们添加到selectedRows中。

以下是一个示例代码:

import React, { useState } from "react";
import { Table } from "antd";

const MyTable = () => {
  const [selectedRows, setSelectedRows] = useState([]);

  const onSelectChange = (selectedRowKeys, selectedRows) => {
    setSelectedRows(selectedRows);
  };

  const handlePageChange = (page, pageSize) => {
    // 获取当前页的选中项的keys
    const currentPageKeys = selectedRows.map((row) => row.key);
    
    // 过滤出上一页已选中的项
    const prevPageSelectedRows = selectedRows.filter((row) =>
      currentPageKeys.includes(row.key)
    );

    // 将上一页已选中的项添加到selectedRows中
    setSelectedRows(prevPageSelectedRows);
  };

  const rowSelection = {
    selectedRowKeys: selectedRows.map((row) => row.key),
    onChange: onSelectChange
  };

  const columns = [
    // 列定义
  ];

  const dataSource = [
    // 数据源
  ];

  return (
    <Table
      rowSelection={rowSelection}
      columns={columns}
      dataSource={dataSource}
      pagination={{
        onChange: handlePageChange
      }}
    />
  );
};

export default MyTable;

通过以上步骤,就可以实现antd Table组件selectedRows翻页后保留上一页已选中的items的功能

解决antd Table组件selectedRows翻页后保留上一页已选中items

原文地址: http://www.cveoy.top/t/topic/iEo0 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录