vue-table表格分页记忆选中的所有数据（vue-table翻页之后保留之前选中的数据）

<template>
    <div class="table">
        <p>表格的使用</p>
          <el-table
      :data="tables"
      ref="tb" 
      :border="true"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column type="selection" width="55"/>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <div>
        <el-pagination
          background
          @current-change="currentChange"
          :current-page="pageIndex"
          :total="tableData.length"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper">
     </el-pagination>
    </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
          tableData: [{
            index:0,
            objectId:"tyui-123",
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1511 弄'
          }, {
              index:1,
               objectId:"tyui-ljh",
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1512弄'
          }, {
              index:2,
               objectId:"tyui-mbn",
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1513弄'
          }, {
              index:3,
               objectId:"tyui-zccv",
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1514弄'
          },{
            index:4,
             objectId:"tyui-ghgh",
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1515弄'
          },{
            index:5,
             objectId:"tyui-asd",
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516弄'
          },{
            index:6,
             objectId:"tyui-xdg",
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517弄'
          }
          ],
          value1:null,
          secIndex:0,
          pageSize:3,
          pageIndex:1,
          tables:[],
          multipleSelectionAll: [],   // 所有选中的数据包含跨页数据
          multipleSelection: [],   // 当前页选中的数据
          idKey:'objectId'
        }
    },
    mounted(){
      this.find();
    },
    methods:{
       //分页
       currentChange(pageIndex){
          this.pageIndex = pageIndex;
          this.find();
       },
       find(){
          this.changePageCoreRecordData();
          let start=this.pageSize*(this.pageIndex-1);
          let end=this.pageSize*this.pageIndex
          this.tables = this.tableData.slice(start,end);
          setTimeout(() => {
            this.toggleSelection();
          }, 50);
       },
      toggleSelection() {
        if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
          return;
        }
        // 标识当前行的唯一键的名称
        let idKey = this.idKey;
        let selectAllIds = [];

        this.multipleSelectionAll.forEach(row => {
          selectAllIds.push(row[idKey]);
        });
        this.$refs.tb.clearSelection();
        for (let i = 0; i < this.tables.length; i++) {
          if (selectAllIds.indexOf(this.tables[i][idKey]) >= 0) {
            // 设置选中，记住table组件需要使用ref="tb"
            this.$refs.tb.toggleRowSelection(this.tables[i], true);
          }
        }
      },
       handleSelectionChange(data){
          this.multipleSelection = data;
          setTimeout(() => {
            this.changePageCoreRecordData();
          }, 50);
       },
       changePageCoreRecordData(){
          // 标识当前行的唯一键的名称
          let idKey = this.idKey;
          // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
          if (this.multipleSelectionAll.length <= 0) {
            this.multipleSelectionAll = this.multipleSelection;
            return;
          }
          // 总选择里面的key集合
          let selectAllIds = [];
          this.multipleSelectionAll.forEach(row => {
            selectAllIds.push(row[idKey]);
          });
          let selectIds = [];
          // 获取当前页选中的id
          this.multipleSelection.forEach(row => {
            selectIds.push(row[idKey]);
            // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
            if (selectAllIds.indexOf(row[idKey]) < 0) {
              this.multipleSelectionAll.push(row);
            }
          });
          let noSelectIds = [];
          // 得到当前页没有选中的id
          this.tables.forEach(row => {
            if (selectIds.indexOf(row[idKey]) < 0) {
              noSelectIds.push(row[idKey]);
            }
          });
          noSelectIds.forEach(id => {
            if (selectAllIds.indexOf(id) >= 0) {
              for (let i = 0; i < this.multipleSelectionAll.length; i++) {
                if (this.multipleSelectionAll[i][idKey] == id) {
                  // 如果总选择中有未被选中的，那么就删除这条
                  this.multipleSelectionAll.splice(i, 1);
                  break;
                }
              }
            }
          });
       }

    },
}
</script>
<style lang="scss" scoped>
.table{
    .ul{
        li{
            text-align:left
        }
    }
}
//vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染,因此使用了/deep/，不然渲染不上去。
  /deep/ .el-table .warning-row td {
    background-color: rgb(254, 246, 211);
    color: rgb(255, 112, 0);
  }
</style>