antd分页多选

吉吉鸭

于 2024-07-10 14:16:40 发布

阅读量279

点赞数 2

分类专栏： antd 文章标签： javascript 前端 react

本文链接：https://blog.csdn.net/J20010905/article/details/140322550

版权

antd 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求： Table切换分页时，保存历史多选数据

方法：antd提供了preserveSelectedRowKeys，类型为 Boolean，为 true时会在更新时记住之前选择的数据。（需要指定rowKey）

代码参考：

  const [modelSelectedRowKeys, setModelSelectedRowKeys] = useState<number[]>([]);
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setModelSelectedRowKeys(newSelectedRowKeys as number[]);
  };
	<TableExt
	 rowKey="id"
	 key="id"
	 scroll={{ x: 1000 }}
	 columns={modelColumns}
	 dataSource={modelDataSource}
     pagination={{
        ...modelPagination,
        onChange: async (page, pageSize) => {
          await onGetMemberList({ pageNum: page, pageSize });
        },
        showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共${total}条数据`,
      }}
      rowSelection={{
        preserveSelectedRowKeys: true,
        onChange: onSelectChange,
        selectedRowKeys: modelSelectedRowKeys,
      }}
    />