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

不知道大家是不是在AntDesign的某一个列表想要做一个批量导出或者操作的时候,发现只要选择下一页,即使选中的ids 都有记录下面,但是就是不回显

后来问了chatGPT,对方的回答是:

在Ant Design的DataTable组件中,当进行分页操作时,会重新渲染表格内容,这会导致之前选中的行数据和选中状态丢失。

于是最后想到了一个办法处理,通过onTableChange时间来控制

代码如下:

bash 复制代码
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重新处理

bash 复制代码
this.dispatch(
      actions.tableRowSelectionChangeAction(
          this.tableId,
          map(selectedRowKeys, (value) => {
              return value;
          })
      )
  );

如果对大家有帮助,留下个小爱心吧😄

相关推荐
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome
m51272 小时前
LinuxC语言
java·服务器·前端