07月12, 2021

关于Antd Table组件selectRows 翻页后不保留上一页已选items的解决方案 (v4版本)

关于Antd Table组件selectRows 翻页后不保留上一页已选items的解决方案

问题描述:

在用antd Table组件写一个产品选择框的时候,遇到antd Table组件的selectedRows在翻页后再勾选新的item,不会保留上一页已勾选的item,而是基于当前页面的dataSource重新记录当前的勾选项.

页面效果

切换分页的时候,需要保留上一页已选的状态.

解决方案:

于是又去仔细查看antd Table组件的官方文档,发现两个可以用得上的API,叫做onSelectonSelectAll.需要自己手动去写选中和取消选中的方法.

页面效果;

首先我们可以看到onSelect需要传入一个函数作为回调,然后这个方法的参数里有record, selected, selectedRows这几项(nativeEvent原生事件我不关心),经过测试后确定:

1、record就是当前操作(选中或取消选中)的item 2、selected是个布尔值,true代表本次是选中操作,false就是取消选中 3、selectedRows是一个数组,就是当前已选择的items(没有跨页的记录)

至于onSelectAll,是在点击全选和取消全选时触发的回调函数,截图中也可以看到,它有selected, selectedRows, changeRows这三个参数:

1、selected,同上,true全选,false取消全选 2、selectedRows,也同上,当前已选择的items(没有跨页的记录) 3、changeRows,这个可就优秀了,它就是你的全选/取消全选操作引起变化的items数组,打个比方,如果一页10个,你一个都没选呢,点全选,就会新选择10个,那么changeRows就是这10条数据,如果你已经选了6条,你又点了全选,那么就相当于你又一次性选了4条,那么changeRows就是这4条


 const onSelect = (record, selected, selectedRows) => {
    console.log('result selectedRows', record, selected, selectedRows);
    const id = record.id;
    if (selected) { // 选中操作

      setSelectedRows(selectedRows.concat([record]));
      setSelectedRowKeys(selectedRowKeys.concat([id]));

    } else {  // 取消选中操作

      setSelectedRows(selectedRows.filter((item) => {
        return item && (item.id != id);
      }));
      setSelectedRowKeys(selectedRowKeys.filter((item) => {
        return item != id;
      }))
    }
    onRadioChange(selectedRows.filter(Boolean));
  }

  // 全选操作
  const onSelectAll = (selected, selectedRows, changeRows) => {

    const AllRows = selectedRows.filter(Boolean).map(item => { return item });
    const AllIds = selectedRows.filter(Boolean).map(item => { return item.id });
    if (selected) { // 全选操作
      setSelectedRows(AllRows);
      setSelectedRowKeys(AllIds);
    } else {
      setSelectedRows([]);
      setSelectedRowKeys([]);
    }
    onRadioChange(AllRows);
  }

当你选中其中的某一项的时候,然后在执行全选操作,就会有重复的数据被选中了,对于重复的数据要进行去重处理下.

最后在Table组件调用的时候,rowSelection属性传入这两个方法:


    rowSelection={{
          type: 'checkbox',
          onSelect: onSelect,
          onSelectAll: onSelectAll,
          selectedRowKeys: selectedRowKeys
    }}

这样就可以保证在切换分页的时候,之前选中的就不会丢失,可以解决跨页选择的问题了.

本文链接:https://901web.com/post/antd-table-selectedRows-pagination.html

-- EOF --

Comments

请在后台配置评论类型和相关的值。