el-table复选框实现分页记忆

  data () {
    return {
myMap:new Map(),
 	}
 },
 methods:{
    selectMemoriedDataFn () { // 分页记忆自动选中方法
      let currentArr = this.myMap.get(this.currentPage)  // 当前分页对应被选中数据
      console.log('选中',currentArr)
      if (currentArr && currentArr.length) { // 存在则继续执行
        let tempRowsIDs = this.tableData.map(L => L.id) // 当前分页被选中数据的id集合
        currentArr.forEach((item) => { // 遍历当前分页被选中数据
          if (tempRowsIDs.includes(item.id)) { // id匹配上，则选中
this.$refs.multipleTable.toggleRowSelection(this.tableData[tempRowsIDs.indexOf(item.id)])
          }
        })
      }
    },
    // 选中选项触发
    handleSelect(val){
      this.myMap.set(this.currentPage,val)
      let all=[]
      for (let value of this.myMap.values()) {
        value.forEach(item=>{
          all.push(item)
        this.multipleSelectionAll=all
        }
        )
      }
    },
    //  currentPage 改变时会触发
    handleCurrentChange(val){
      this.currentPage=val
      if(this.myMap.has(this.currentPage)){
        this.flag=true
        this.selectMemoriedDataFn()
        console.log('flag change',this.flag)
      }
      this.getData()
     },
     },
  computed:{
    // 序列化map
    mySetAsList() {
      // var x = this.mySetChangeTracker;
      // By using `mySetChangeTracker` we tell Vue that this property depends on it,
      // so it gets re-evaluated whenever `mySetChangeTracker` changes
      return Array.from(this.myMap);
    }
  },
  watch:{
    tableData () { // 监听数据变化，然后执行分页记忆自动选中回调
      this.$nextTick(() => {
        this.selectMemoriedDataFn()
      })
    }
  },