解决antd Table组件selectedRows翻页后保留上一页已选中items
要解决antd Table组件selectedRows翻页后保留上一页已选中的items,可以使用以下步骤:
- 在父组件中维护一个selectedRows的状态,用于保存选中的行数据。
- 在Table组件中,通过rowSelection属性来设置选择模式,并传入一个对象,其中selectedRowKeys属性绑定到selectedRows的keys值。
- 在onSelectChange事件中,更新selectedRows的状态。
- 在分页器的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的功能

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