el-table实现跨页全选

代码如下

<template>
    <div>
        <el-table
        ref="myTable"
        :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" 
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @select-all="selectAll" >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="日期"
          width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div style="margin-top: 30px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" 
        :page-sizes="[5,10,30, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"></el-pagination>
      </div>
    </div>
   
  </template>
  
  <script>
    export default {
      data() {
        return {
        //是否全选
            isAllSelected:false,
          //选中的exId集合
          selectList:[],
          tableData: [{
            exId:1,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            exId:2,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            exId:3,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            exId:4,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            exId:5,
            date: '2016-05-08',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            exId:6,
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            exId:7,
            date: '2016-05-07',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }],
          total: 0,
          currentPage: 1, //初始页
          pagesize: 5, //    每页的数据
        }
      },
  
      methods: {
        selectAll(selection) {
      this.isAllSelected=!this.isAllSelected
      if((selection.length&&this.isAllSelected) || (!selection.length&&!this.isAllSelected)){
       // 全选
           this.tableData.forEach(item=>{
               if(!this.selectList.some(items =>  items == item.exId)){
                   this.selectList.push(item.exId)
               }
           })
       }else{
           // 全不选
           this.tableData.forEach(item=>{
               let index = -1
               this.selectList.some((items,i)=>{
                   if(items == item.exId){
                       index = i
                   }
               })
               if(index > -1) this.selectList.splice(index,1)
           })
           //清除选中的状态
           this.$refs.myTable.clearSelection()
       }
   
     },
   handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      //  this.$nextTick这段代码可以写在后端获取列表之后，用来解决切换页面，checkbox没有被选中的问题，如果是全选状态，切换页面checkbox设置为选中状态
           this.$nextTick(()=>{
               this.tableData.forEach(item=>{
                   if((!this.selectList.includes(item.exId)&&this.isAllSelected) || (!this.isAllSelected && this.selectList.includes(item.exId))){
                       this.$refs.myTable.toggleRowSelection(item,true)
                   }else{
                       this.$refs.myTable.toggleRowSelection(item,false)
                   }
               })
           })
    },
    handleSelectionChange(val) {
            this.selectList = val.map((item) => item.exId);
        }
      }
    }
  </script>