React AntDesign表批量操作时的selectedRowKeys回显选中

最新推荐文章于 2023-11-17 11:45:43 发布

蓉妹妹

最新推荐文章于 2023-11-17 11:45:43 发布

阅读量1k

点赞数

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_43517190/article/details/131891323

版权

不知道大家是不是在AntDesign的某一个列表想要做一个批量导出或者操作的时候，发现只要选择下一页，即使选中的ids 都有记录下面，但是就是不回显
在这里插入图片描述
后来问了chatGPT，对方的回答是：
在Ant Design的DataTable组件中，当进行分页操作时，会重新渲染表格内容，这会导致之前选中的行数据和选中状态丢失。

于是最后想到了一个办法处理，通过onTableChange时间来控制
代码如下：

private onTableChange = (newSelectedRowKeys: string[]) => {
    console.log(newSelectedRowKeys);
    const { selectedRowKeys } = this.state;
    setTimeout(() => {
        this.dispatch(
            actions.tableRowSelectionChangeAction(
                this.tableId,
                map(selectedRowKeys, (value) => {
                    return value;
                })
            )
        );
    }, 300);
};

private onTableRowSelectAll = (
    selected: boolean,
    selectedRows: any[],
    unSelectedRows: any[]
) => {
    const { selectedRowKeys } = this.state;
    if (selected) {
        const addRows = selectedRows.filter((item: any) => {
            return !selectedRowKeys.includes(item.id);
        });
        const addRowsRowIds = map(addRows, 'id');
        this.setState({ selectedRowKeys: [...selectedRowKeys, ...addRowsRowIds] });
    } else {
        const deleteIds: any = map(unSelectedRows, 'id');
        const deleteRows = selectedRowKeys.filter((item: any) => {
            return !deleteIds.includes(item);
        });
        this.setState({ selectedRowKeys: [...deleteRows] });
    }
};

private onTableSelect = (record: any, selected: boolean) => {
    const { selectedRowKeys } = this.state;
    if (selected) {
        this.setState({
            selectedRowKeys: [...selectedRowKeys, record.id],
        });
    } else {
        this.setState({
            selectedRowKeys: selectedRowKeys.filter((key) => key !== record.id),
        });
    }
};

使用onTableChange 因为它是几个方法中最后一个执行的方法，也是必触发的方法，然后通过dispatch，对表的selectedRowKeys重新处理

this.dispatch(
      actions.tableRowSelectionChangeAction(
          this.tableId,
          map(selectedRowKeys, (value) => {
              return value;
          })
      )
  );