table组件+分页器的多选状态缓存

前言：

最近在开发中要实现一个table组件+分页器+多选的功能，在调试组件时发现，table组件加分页器加多选功能后，每切换一次分页器，table组件都会重新渲染数据，之前的勾选状态会清除，这样传给后端接口的只有当前页面的勾选数据，之前页面勾选的都没有了，不符合预期要求，后来通过多选table组件的一些事件处理方法解决了多选状态缓存问题。文章主要就是分享了如何解决多选项的缓存问题，并将所有将勾选数据都保存下来传给后端接口。

实现思路：

利用上面四个事件处理方法，将所有已勾选项保存到selectedList中（注意去重），然后在每次渲染table数据时，给每一条table数据加上_checked字段，通过遍历已选项数据selectedList更新每条table数据的选中状态，即更新_checked字段，可以保留勾选状态。

实现方法：

1、定义 已勾选项：selectedList 和 table数据：textList

 import { uniqBy } from 'lodash-es' // 引入去重方法
 const selectedList = ref([])
 const textList = ref([])

2、将所有已勾选项保存到selectedList中

    // 选择某一项
    const handleSelectRow = (selection, row) => {
      selectedList.value.push(row)
    }

    // 取消选择某一项
    const handleCancelRow = (selection, row) => {
      selectedList.value.splice(
        selectedList.value.findIndex(
          (item) => item.id === row.id
        ),
        1
      )
    }

    // 全选之前可能单独选择了某几项，然后点了全选，因此需要去重
     const handleSelectAll = (selection) => {
      selectedList.value = uniqBy(selectedList.value.concat(selection), 'id')
    }

    // 取消全选
    const handleCancelSelectAll = () => {
      textList.value.map((task) => {
        selectedList.value.splice(
          selectedList.value.findIndex(
            (item) => item.id === task.id
          ),
          1
        )
      })
    }

    // 遍历table数据textList和selectedList，检查更新textList的选中状态，即_checked字段
    const checkSelected = () => {
      for (let i = 0; i < textList.value.length; i++) {
        textList.value[i]._checked = false
        for (let j = 0; j < selectedList.value.length; j++) {
          if (selectedList.value[j].id === textList.value[i].id) {
            textList.value[i]._checked = true
          }
        }
      }
    }

3、在每次渲染table数据textList时，检查更新选中状态checkSelected()

   getTaskList(params)
    .then((res) => {
      textList.value = res.rows
      pageInfo.totalSize = res.total
      pageInfo.totalPage = Math.ceil(pageInfo.totalSize / pageInfo.limit
      checkSelected()
    })

4、总结：通过以上方法，即可实现table组件+分页器的多选状态缓存。