react antdesign table组件翻页后selectRows丢失的问题

第一种情况:
使用modal组件通过table选择数据,翻页后再次选择keyArray和selectRows均被覆盖,之前的数据丢失

rowSelection新增preserveSelectedRowKeys: true解决

              <Table
                rowSelection={{
                  selectedRowKeys,
                  preserveSelectedRowKeys: true,
                  onChange: onSelectChange,
                }}
                size="small"
                columns={columns}
                dataSource={tableData}
                pagination={false}
                loading={tableLoading}
                rowKey="accountId"
                bordered
                scroll={{ x: "auto", y: 500 }}
              ></Table>

第二种情况

关闭modal后再次打开modal回显选中的数据,此时再次选择数据会丢失其他页的数据,表现为其他页的selectRows为undefined,

出现的原因为,table组件仅持有了selectedRowKeys,selectRows则通过selectedRowKeys去table数据查找,其他页的数据丢失查找不到,则返回undefined。

解决办法为通过keyArray,在业务侧维护:selectRows,弃用table组件的selectRows

const onSelectChange = (keyArray: any, selectRows: any) => {
    console.log('keyArray:',keyArray,'selectRows:', selectRows);
    let tempSelectRows:any = [...selectTableData];
    let tempkeyArray:any = [...keyArray];
    //深拷贝,避免影响原数据
    let tempTableData:any = JSON.parse(JSON.stringify(tableData));
    //处理新增数据
    tempkeyArray.forEach((item: any, index: number) => {
      let keyIndex = selectedRowKeys.findIndex((key: any) => {return key == item});
      if(keyIndex == -1){
        tempSelectRows.push(tempTableData.find((row: any) => row.accountId == item));
      }
    })
    //处理删除数据
    tempSelectRows = tempSelectRows.filter((item: any, index: number) => {
      let keyIndex = tempkeyArray.findIndex((key: any) => {return key == item.accountId});
      return keyIndex != -1
    })
    //处理序号
    tempSelectRows.forEach((item: any, index: number) => {
      item.index = index + 1;
    });
    //处理最大长度
    if (keyArray.length > MAX_SELECT_NUM) {
      message.error(`单次最多可选择${MAX_SELECT_NUM}个用户`);
      setSelectedRowKeys(keyArray.slice(0, MAX_SELECT_NUM));
      setSelecttableData(tempSelectRows.slice(0, MAX_SELECT_NUM));
    } else {
      setSelectedRowKeys(keyArray);
      setSelecttableData(tempSelectRows);
    }
  };

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值