iview table后端分页 多选 翻页选中回显

在iview的table组件中，前端在多选时如果点击下一页则丢失了上一页table的多选数据（由于采用的后端分页，每次翻页会直接刷新为新数据）

---

实现效果
全选反选 选中单条 取消单条

---

代码部分

定义数组

      selectedData: [], // 选中的数组
      arr1: [], // 原本
      arr2: [] // 去重后的

表格

	<Table class="mt20" :data="tableData" :loading="loading" :columns="tableColumns" ref="table"
       @on-select="onSelectAll" @on-select-cancel='onSelectCancel'
       @on-select-all ='onSelectAll' @on-select-all-cancel='onSelectAllCancel'>
    </Table>

JS

   // 点击全选时触发
    onSelectAll (selection) {
      // arr1 去重之前的 选中后合并的数组
      this.arr1 = [...selection, ...this.selectedData]
      // 去重  some  和every 相反，只要有一个满足条件，就返回true
      for (let val of this.arr1) {
        if (!this.arr2.some(item => item.serialNum === val.serialNum)) {
          this.arr2.push(val)
        }
      }
      if (this.arr2.length >= 30) {
        this.enableModal = true
      }
    },
    
    // 取消选中某一项时触发
    onSelectCancel (selection, row) {
      // 拿到取消选择的项数据 从arr2中去除 findIndex找返回传入一个符合条件的数组第一个元素位置,没有返回-1
      let result = this.arr2.findIndex((ele) => {
        return ele.serialNum === row.serialNum
      })
      this.arr2.splice(result, 1)
    },
    
    // 点击取消全选时触发
    onSelectAllCancel () {
      // 拿到当前分页的数据进行取消选中处理
      // every方法，只要有一项不满足条件就返回false，也就是说必须每一项都得满足才能返回true。返回的是布尔值。
      // * filter方法，只要条件满足，我就将此元素返回出去，返回的是元素。
      // *  在本示例中，只要arr1中存在与arr2中相同的元素，我就返回false。也就是说，我拿着arr2中
      // *  的第一项去和arr1中的每一项去比较，如果code都不相等，满足所有条件，我就返回true。
      // *       在filter中，只要条件为true，我就将这一项返回出去，就实现了批量删除的效果。
      	this.arr2 = this.arr2.filter(item => {
        return this.tableData.every(item2 => {
          return item.serialNum !== item2.serialNum
        })
      })
    },

本文采用 serialNum 作为唯一的值 可以选为id 根据具体情况而定

---

每次点击分页的时候，获取到最新一页的数据，进行选中回显
在点击分页 调用的事件里写

 getTableList (pageIndex) {
      this.pageIndex = pageIndex
      this.loading = true
      const data = {
        name: this.name,
        serialNum: this.serialNum,
        pageIndex,
        pageSize: this.pageSize
      }
      getDevicePageList(data)
        .then(res => {
          const { data: {data, code} } = res
          if (data && code === 0) {
            data.list.forEach(item => {
            // 禁用选项
              	if (item.id === 19) { // 判断条件
                	this.$set(item, '_disabled', true)
              	}
              this.arr2.forEach(element => {
                if (element.serialNum === item.serialNum) {
                  this.$set(item, '_checked', true)
                }
              })
            })
            this.tableData = data.list
            this.dataCount = data.total
          } else {
            this.$Message.error(res.message)
          }
          this.loading = false
        }, err => {
          // 接口错误
          console.log(err)
        })
        .catch((err) => {
          // 处理逻辑出错
          console.log(err)
        })
    },

其中， 这一段具为重要
触发翻页按钮时 iview提供了_checked的属性 设置true即为选中

     data.list.forEach(item => {
              this.arr2.forEach(element => {
                if (element.serialNum === item.serialNum) {
                  this.$set(item, '_checked', true)
                }
        })