el table翻页默认选中

因为我的table有翻页功能 然后当我翻页的时候table所渲染的数据会刷新,当我再回到之前所做了选择的页面的时候,table不会记录我之前的选中状态.

在我的table中有两个事件
@select="selectOne"
@select-all="selectAll"

selectOne

点击table每行前面的选择框

// defaultList 初始化的list 也是我所需要渲染选中的list 
// 首先判断我当前勾选的这条数据在不在defaultList里面 用findIndex 通过某条件找下标 如果找到则返回下标 反之则返回 -1
// 然后判断一下 val 如果由未勾选变成已勾选则是有当前数据的 反之 则为空集合
// 如果由未勾选变为勾选 而且 在defaultList里面没有这条数据 则将这条数据推进去
// 如果由勾选变为为勾选 而且 在defaultList里面有这条数据 则将这条数据删除 
// *splice 数组的拓展方法 会改变原数组
selectOne(val,row) {
	 let newList = val.filter(item=>item.invoiceSysId === row.invoiceSysId)
     let flag = this.defaultList.findIndex(item=>item.invoiceSysId === row.invoiceSysId)
     if(newList .length){
         if(flag === -1){
             this.defaultList.push(row)
         }
     }else{
         if(flag !== -1){
             this.defaultList.splice(flag,1)
         }
     }
 },

selectAll

点击table表头的选中

// tableData 为表单所渲染的数据
// 如果由未全选变为全选则val会有当前table的数据 反之则为空集合
// 当点击表头的全选按钮的时候 我会会遍历tableData 用findIndex 通过某条件找下标 如果找到则返回下标 反之则返回 -1
// 如果由未勾选变为勾选 而且 在defaultList里面没有这条数据 则将这条数据推进去
// 如果由勾选变为为勾选 而且 在defaultList里面有这条数据 则将这条数据删除 
// *splice 数组的拓展方法 会改变原数组
selectAll(val) {
     this.tableData.forEach(ele=>{
         let flag = this.defaultList.findIndex(item=>item.invoiceSysId === ele.invoiceSysId)
         if(val.length){
             if(flag === -1){
                 this.defaultList.push(ele)
             }
         }else{
             if(flag !== -1){
                 this.defaultList.splice(flag,1)
             }
         }
     })
 },

渲染

在点击分页异步获取tableData的时候 通过结果赋值 数据驱动页面渲染 此时如果在赋值之后直接调用table的勾选方法toggleRowSelection 可能会未选中,
此时我这里用到nextTIck (传送至某大佬的解释)

 this.$nextTick(()=>{
      this.tableData.forEach(item=>{
      this.defaultList.forEach(ele=>{
          if(ele.invoiceSysId===item.invoiceSysId){
              this.$refs.multipleTable.toggleRowSelection(item,true);
          }
      })
      })   
  })