关于如何解决antd表格分页勾选记忆回现问题

工作中会经常遇到使用表格组件,但是并没有考虑过分页勾选问题如何实现

下面分享一下我实现的方法

首先看表格组件(版本antdv 3.2.20)

表格HTML

<a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" 
:columns="columns" :data-source="data" />
const onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    state.selectedRowKeys = selectedRowKeys;
};

selectedRowKeys: 选中项索引是一个数组[1,2]之类的

首先分析一下问题思路

（1）先勾选本页表格中行，再点击分页勾选表格行时，发现控制台selectedRowKeys打印的是本页勾选元素，丢失了之前页表格勾选的元素。

（2）其次返回上一页，也会使勾选的元素丢失。

解决思路：手搓js哈哈哈哈，可以滴老铁！废话不多说哦，直接搓！

(1)当我们点击勾选时，需要定义一个对象将勾选的数据进行标识存储，分页勾选的时候继续存储。

(2)其次解决分页勾选过回显问题通过selectedRowKeys数组中已存在的值可以使表格中的数据行高亮，如何使用呢，需要在分页接口调取数据给表格tableData后进行调用。

定义标识存储选中对象
 selectMap: {}
 看方法怎么做
  const onSelectChange = (selectedRowKeys, selectedRows) => {
      //定义一个存储行数据对象，方便后续对行内对象数据进行提取
      state.selectRowsList = new Set([...state.selectRowsList, ...selectedRows])
      //首先定义一个set对象进行将勾选数据去重，保险一些。
      //然后以键值对进行标记存到selectMap对象中，选中true，未选中false
      let checkedUserIds = new Set(selectedRows.map(r => r.id))
      // 对比接口表格数据进行标记
      state.tableData.forEach(r => {
        state.selectMap[r.id] = checkedUserIds.has(r.id) ? true : false
      })
      // 选中高亮数组
      state.selectedRowKeys = selectedRowKeys
    }

    构造回显方法：
    因为之前分页勾选都进行了数据存储标识，这时候就对当前分页进行数据标识匹对还原
    const showSelectUser = () => {
    // 先清空当前页高亮数组
      state.selectedRowKeys = []
    // 调取接口后进行标识匹配，如果是true，对高亮数组进行添加元素达到回显效果
      state.tableData.forEach((item) => {
        if (state.selectMap[item.id]) {
          state.selectedRowKeys.push(item.id)
        }
      })
    }

回显方法需要在分页接口后调取使用，达到分页选中行高亮效果：
  trialCarApplyInfoApi(params).then((res) => {
        res.data.forEach(d => {
          state.columns.forEach((column) => {
            if (d[column.key]) {
              d[column.key + '_label'] = d[column.key]
            } else {
              d[column.key + '_label'] = '/'
            }
          })
        })
        state.totalNum = res.pageInfo.totalCount
        state.tableData = res.data
        // 使用回显方法
        showSelectUser()
      })

业务中对勾选的数据如何拿到，提取使用。怎么办呢？还是通过标识进行匹配过滤处理。

    //定义一个返回数据的方法（不是最优解）：
    const getSelectData = () => {
      let list = []
      Object.entries(state.selectMap).forEach(i => {
      // 之前存储的数据对象，现在需要用上
        state.selectRowsList.forEach(j => {
        // 匹配同个key相同，且value为true才是我们想要的数据
          if (j.id == i[0] && i[1]) {
            list.push(j)
          }
        })
      })
      return list
    }

总结：遇到问题需要多思考，尝试着解决问题，探索一下，积累解决问题的经验！

玲珑骰子安红豆，入骨相思知不知。 ----温庭筠