antd表格组件分页后拼接选中的数据

581 阅读1分钟

在react项目中使用antd的ui组件库,使用table组件切换页码时,勾选组件希望selectedRows能获取全面的勾选数据。但是现在出现一个问题能获取当前页的数据,无法获取上一页选中的数据。

解决方法:用二维数据+下标来存储数据 将每一页作为二维数据的下标,将每一页选中的数组存储在这个二维数组中

第一步:选中时存储二维数组数据

  const onSelectedRowChange = (—, selectedRows) => {
  let _doubleArr = JSON.parse(JSON.stringify(doubleArr))
  _doubleArr[pagination.current ? pagination.current - 1 : 0] = selectedRows // 勾选生成二维数组
    // 这块扁平化成为一位数组存放拼接好的一维数组
    setSelectedRows(mapRows(_doubleArr)) //更新数据
    setDoubleArr(_doubleArr)//更新数据
  }

勾选时触发事件

 const rowSelection = {
   selectedRowKeys: selectedRows.map((item: any) => item.key),
   onChange: onSelectedRowChange,
 }

第二步 二维数组转一维数组

  const mapRows = (params: any[]) => {
    let res: any = []
    for (let i = 0; i < params.length; i++) {
      if (Array.isArray(params[i])) {
        res = res.concat(mapRows(params[i]))
      } else {
        res.push(params[i])
      }
    }
    // 去掉undefined的情况
    return res.filter(Boolean) 
  }

结束语

希望大家能够喜欢我的文章,我真的很用心在写,也希望通过文章认识更多志同道合的朋友。

最后伙伴们,如果喜欢我的可以给点一个小小的赞👍或者关注➕都是对我最大的支持。