VUE+elementUI el-table 表格跨页全选

代码部分

 
<el-table
 size="small"
 @selection-change="handleSelectionChange"
 @select-all="selall"
 :data="tabledata"
 :row-key="getRowKeys"
 ref="tableref"
 >
 
 <el-table-column
   type="selection" :reserve-selection="true"
   width="55"></el-table-column>

 <el-table-column
 v-for="col in form1.table.header"
 :prop="col.field"
 :label="col.name"
 :key="col.field">
 </el-table-column>

 </el-table>

 <div class="block" style="margin-top:8px;">
   <el-pagination align='center' background 
     :current-page.sync="form1.currentPage"
     :page-size="form1.pageSize" 
     layout="slot, prev, pager, next, jumper" 
     :total="form1.total">
   </el-pagination>
 </div>
 <el-divider></el-divider>
 <el-row>
   <el-row style="max-height: 200px; overflow-y: scroll;">
     当前已选：{{checklinelisthtml.length!=0?checklinelisthtml:form1.checklinelist}}
   </el-row>
   <el-row style="text-align:right">
    <el-button  style="float: left;padding-left: 0;" type="text"  @click="clearcheck">清空所选</el-button>
     <el-button size="small"  class="mybutton" plain @click="activeName=''">取消</el-button>
     <el-button size="small" class="mybutton"   @click="activeName=''">确定</el-button>
   </el-row>
 </el-row>

 
 <script>
 export default {
   data(){
     return {
       isselall:false,
       checklinelisthtml:[],
       form1:{
         checklinelist:[],
         multipleSelection:[],
         substation:"",linelist:[],
         options: [{
           value: 'HTML',
           label: 'HTML12'
         }, {
           value: 'CSS',
           label: 'CSS1'
         }, {
           value: 'JavaScript',
           label: 'JavaScript2'
         }],
         lineoptions:[],
         linemodel:"",
         pageSize:3,
         currentPage:1,
         total:0,
         table:{
           header:this.$API["/xlzg"].line.header,
           tabledata:[
             {f1:"11111",f2:"22222",f3:"33333333",f4:"444444444",f5:"55555555",f6:"6666666666"},
             {f1:"11111",f2:"22222",f3:"33333333",f4:"444444444",f5:"55555555",f6:"6666666666"},
             {f1:"11111",f2:"22222",f3:"33333333",f4:"444444444",f5:"55555555",f6:"6666666666"},
             {f1:"11111",f2:"22222",f3:"33333333",f4:"444444444",f5:"55555555",f6:"6666666666"},
             {f1:"11111",f2:"22222",f3:"33333333",f4:"444444444",f5:"55555555",f6:"6666666666"},
           ]
         }
       },
       form2:{
         table:{
           header:this.$API["/2dmaptab2"].header,
           tabledata:[
             {f1:"11111",f2:"22222",f3:"33333333",f4:"444444444",f5:"55555555",f6:"6666666666"},
             {f1:"11111",f2:"22222",f3:"33333333",f4:"444444444",f5:"55555555",f6:"6666666666"},
             {f1:"11111",f2:"22222",f3:"33333333",f4:"444444444",f5:"55555555",f6:"6666666666"},
             {f1:"11111",f2:"22222",f3:"33333333",f4:"444444444",f5:"55555555",f6:"6666666666"},
             {f1:"11111",f2:"22222",f3:"33333333",f4:"444444444",f5:"55555555",f6:"6666666666"},
           ]
         }
       },
       activeName:"",
       devlist:[],
       devsel:["配电变压器","柱上变压器"],
       // devsellabel:[],
       line_list:[]
     }
   },
   props:{
   },
   computed: {
     tabledata() {
       return this.form1.table.tabledata.slice((this.form1.currentPage-1)*this.form1.pageSize,this.form1.currentPage*this.form1.pageSize)
     }
   },
   methods: {
    selall(val){
      // console.log(val,this.isselall)
      if(!this.isselall){//翻页多选
        this.$refs.tableref.clearSelection()//会选择两次，所以先清掉
        this.form1.multipleSelection = this.form1.table.tabledata
        this.form1.table.tabledata.forEach((row)=>{
          //console.log(row.id)
          this.$refs.tableref.toggleRowSelection(row)
        })
        this.isselall = true
      }else{
        this.$refs.tableref.clearSelection()
        this.isselall = false
        this.form1.multipleSelection=[]
      }
      // console.log(val,this.isselall,this.multipleSelection)
    },
    clearcheck(){
      this.$refs.tableref.clearSelection()
    },
    getRowKeys(row) {
      return row.pms_line_id
    },
 
   },
   mounted(){
     this.getbdz()
    //  this.getline()
   }
 }
 </script>

核心代码：

selall(val){
      // console.log(val,this.isselall)
      if(!this.isselall){//翻页多选
        this.$refs.tableref.clearSelection()//会选择两次，所以先清掉
        this.form1.multipleSelection = this.form1.table.tabledata
        this.form1.table.tabledata.forEach((row)=>{
          //console.log(row.id)
          this.$refs.tableref.toggleRowSelection(row)
        })
        this.isselall = true
      }else{
        this.$refs.tableref.clearSelection()
        this.isselall = false
        this.form1.multipleSelection=[]
      }
      // console.log(val,this.isselall,this.multipleSelection)
    },

<el-table
 size="small"
 @selection-change="handleSelectionChange"
 @select-all="selall"
 :data="tabledata"
 :row-key="getRowKeys"
 ref="tableref"
 >
 
 <el-table-column
   type="selection" :reserve-selection="true"
   width="55"></el-table-column>