【vue】element el-table实现跨页勾选

1 el-table添加selection-change事件

<el-table ref="multipleTable" :data="tableData"
 @selection-change="handleSelectionChange"  >

2 定义一个属性存储被选中的值

当翻页时会调用选择方法它的值val是空，所有这里用了selecttype用来监视是否是翻页

handleSelectionChange(val){
     //判断是否是翻页状态
      if(this.selecttype){
        val = this.selectrow//读取被选中的值
      }
      this.selecttype = false
      for(let listItem of this.tableData){
        let eIndex = val.findIndex(item=>item.ID===listItem.ID)
        if(eIndex>=0){
          //已选中的
          let index = this.selectrow.findIndex(item=>item.ID===listItem.ID)
          if(index<0){
             this.selectrow.push(listItem)
          }
        }else{
          //未选中的
          let index =this.selectrow.findIndex(item=>item.ID===listItem.ID)
          if(index>=0){
            this.selectrow.splice(index,1)
          }
        }
      }
      this.multipleSelection = this.selectrow;
    },

3 翻页时设置

this.$nextTick(()=>{  //this.selectrow
              for(let listItem of this.tableData){
                let index = this.selectrow.findIndex(item=>item.ID===listItem.ID)
                if(index>=0){
                  this.$nextTick(()=>{
                  //修改表格选择状态
                    this.$refs.multipleTable.toggleRowSelection(listItem,true)
                  })
                }
              }
              this.loading=false
        })

4 设置监视

监视是否翻页

 watch: {
    index: {
      handler(newValue, oldValue) {
       this.selecttype = true
      }
    },
  },

参考文章
【vue】element el-table怎么实现跨页勾选