关于el-table中翻页后保留勾选

前言

原有的表格勾选只保留当前页的，一旦翻页则重新计算。

因此，需要进行优化。

 <el-table
          stripe
          :data="task"
          style="width: 100%"
          row-key="ictRewardGrantInfoId"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
          @select-all="handleSelectAll"
          @select="handleSelect"
       / >

注意：

1、row-key要为实际上data实际的关键字段

2、select的三个方法都要用到，不能省略

3、selection-change：是正常选择勾选时，调用的。

4、select-all：是点击全选时，调用的

5、select：是点击取消时，调用的

      selectList：[] ===> 当前页勾选的选项
      delSelect: [],  ===>  为了取消勾选的选项而存在，将其存入
      selectedIds: [], ===》 获取已经勾选的选项

代码

    handleSelectAll (selection) {
      const allRowsCount = this.selectList.length
      if (selection.length === allRowsCount && allRowsCount > 0) {
        // 全选操作
      } else {
        // 当已选等于0 ，则也可以判断为原本已选只有当前这一页的数据，若是需要了，则都为0了，因此前面的判断，已选不能为0
        // 取消全选操作，将当前页的所有行删除
        console.log('cancel', this.task)
        this.task.forEach(it => {
          this.selectedIds = this.selectedIds.filter(id => id.ictRewardGrantInfoId !== it.ictRewardGrantInfoId)
        })
      }
    },
    handleSelect (selection, row) {
      const rowId = row.ictRewardGrantInfoId
      if (selection.some(item => item.ictRewardGrantInfoId === rowId)) {
        // this.delSelect = this.delSelect.filters(row.ictRewardGrantInfoId)
      } else {
        // 取消勾选操作，从 Set 中移除 id
        console.log('取消勾选的行:', row)
        this.delSelect.push(row)
        // 可以在这里添加处理取消勾选行的逻辑
      }
    },
    handleSelectionChange (val) {
      // 多选切换
      console.log(val)
      this.selectList = val
      val.forEach(it => {
        if (this.selectedIds.some(item => item.ictRewardGrantInfoId === it.ictRewardGrantInfoId)) {
          // 如果已存在，则不添加
        } else {
          // 如果不存在，则添加
          this.selectedIds.push(it)
        }
      })
      // 移除当前未选中的 ictRewardGrantInfoId
      if (this.delSelect.length > 0) { // 有取消勾选的行
        this.delSelect.forEach(it => {
          this.selectedIds = this.selectedIds.filter(ele => ele.ictRewardGrantInfoId !== it.ictRewardGrantInfoId)
        })
        this.delSelect = []
      }
      // 合并之前选中的和当前选中的 ictRewardGrantInfoId
      this.selectedIds = [...new Set([...this.selectedIds])]
    },

handleSelectionChange是我们的首要勾选的判断

勾选了先判断是否存在于已经勾选的数组selectedIds中，不存在则添加到数组中。

然后将取消勾选的选项delSelect与已经勾选的数组selectedIds进行比较，同时存在的话就需要将selectedIds中重复的删除（也就是从已经勾选的选项删除取消的选项）

注意handleSelectionChange是只能判断勾选的选项，不能识别全选取消，也不能获取取消勾选的选项，因此，我们需要select-all识别全选，和select是被取消的选项

 handleSelectionChange (val) {
      // 多选切换
      console.log(val)
      this.selectList = val
      val.forEach(it => {
        if (this.selectedIds.some(item => item.ictRewardGrantInfoId === it.ictRewardGrantInfoId)) {
          // 如果已存在，则不添加
        } else {
          // 如果不存在，则添加
          this.selectedIds.push(it)
        }
      })
      // 移除当前未选中的 ictRewardGrantInfoId
      if (this.delSelect.length > 0) { // 有取消勾选的行
        this.delSelect.forEach(it => {
          this.selectedIds = this.selectedIds.filter(ele => ele.ictRewardGrantInfoId !== it.ictRewardGrantInfoId)
        })
        this.delSelect = []
      }
      // 合并之前选中的和当前选中的 ictRewardGrantInfoId
      this.selectedIds = [...new Set([...this.selectedIds])]
    },


getList () {
 this.task = res.data.data.records
          this.$nextTick(() => {
            this.task.forEach(item => {
              if (this.selectedIds.some(ele => ele.ictRewardGrantInfoId === item.ictRewardGrantInfoId)) {
                this.$refs.multipleTable.toggleRowSelection(item, true)
              }
            })
          })
}

select识别取消的勾选，并将其存入待删除选项数组中

这个方法是针对单个点击的取消，无法识别全选的取消！！

因此单独使用了select-all方法。

这个方法中的selection是选中的选项（会有多个选中，不是只点击的那一次选项），而row是点击的行（不论是取消还是选中，只是点击的那一行）

因此，根据选中的选项是否为与当前行的信息吻合，即可判断是选中还是取消了。

如果是选中，咱们就走handleSelectionChange方法，正常添加了。

反之，如果取消，则无法与row的ictRewardGrantInfoId(识别的key)相等，因此，将row添加进到待删除的数组中。接着就是走handleSelectionChange方法，handleSelectionChange中的待删除数组就是从这里赋值的。

 handleSelect (selection, row) {
      const rowId = row.ictRewardGrantInfoId
      if (selection.some(item => item.ictRewardGrantInfoId === rowId)) {
        // this.delSelect = this.delSelect.filters(row.ictRewardGrantInfoId)
      } else {
        // 取消勾选操作，从 Set 中移除 id
        console.log('取消勾选的行:', row)
        this.delSelect.push(row)
        // 可以在这里添加处理取消勾选行的逻辑
      }
    },

select-all识别全选的取消，直接从已选择数组删除选项

同样的，selection是点击全选按钮选中的选项的数组。

如果当前页已选数组selectList长度和点击全选后选项数组selection长度一致，且不等于0，则就是选中全部， 正常走handleSelectionChange方法。

其实，点击全选的话，两者的长度一定相等的，因为两者都是当前页的已选数组。

当selection长度为零，则一定是取消全选了

反之，我们可以直接在全局的已选数组selectedIds中将当前页的所有选项删除，而当前页的所有选项，其实就是data数据中的当前页数据。

 handleSelectAll (selection) {
      const allRowsCount = this.selectList.length
      if (selection.length === allRowsCount && allRowsCount > 0) {
        // 全选操作
      } else {
        // 当已选等于0 ，则也可以判断为原本已选只有当前这一页的数据，若是需要了，则都为0了，因此前面的判断，已选不能为0
        // 取消全选操作，将当前页的所有行删除
        console.log('cancel', this.task)
        this.task.forEach(it => {
          this.selectedIds = this.selectedIds.filter(id => id.ictRewardGrantInfoId !== it.ictRewardGrantInfoId)
        })
      }
    },

切换页面（获取data数据更新）时，要根据全局已选数组，将table中的选项相应的勾选。

 this.$nextTick(() => {
            this.task.forEach(item => {
              if (this.selectedIds.some(ele => ele.ictRewardGrantInfoId === item.ictRewardGrantInfoId)) {
                this.$refs.multipleTable.toggleRowSelection(item, true)
              }
            })
          })

综合起来，就满足了我跨页勾选需求。既能保证我之前勾选存在，也能保证我单独取消或者单独选中后对全局已选数组的更新，还满足了取消全选后对已选数组的更新。保证了全局已选数组动态更新。

展示页面

伊丝忒塔