el-table 分页记忆缓存

<template>
  <div class="table">
    <p>表格的使用</p>
    <el-table
      :data="tables"
      ref="tb"
      :border="true"
      @selection-change="handleSelectionChange"
      style=" 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"
        :page-sizes="pageSizes"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change='sizeChange'>
      </el-pagination>
      <el-button type="success" @click="onShow">22222</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'test001',
  data () {
    return {
      tableData: [{
        index: 0,
        objectId: 'tyui-123',
        date: '2016-05-02',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1511 弄'
      }, {
        index: 1,
        objectId: 'tyui-ljh',
        date: '2016-05-04',
        name: '王小虎2',
        address: '上海市普陀区金沙江路 1512弄'
      }, {
        index: 2,
        objectId: 'tyui-mbn',
        date: '2016-05-01',
        name: '王小虎3',
        address: '上海市普陀区金沙江路 1513弄'
      }, {
        index: 3,
        objectId: 'tyui-zccv',
        date: '2016-05-03',
        name: '王小虎4',
        address: '上海市普陀区金沙江路 1514弄'
      }, {
        index: 4,
        objectId: 'tyui-ghgh',
        date: '2016-05-04',
        name: '王小虎5',
        address: '上海市普陀区金沙江路 1515弄'
      }, {
        index: 5,
        objectId: 'tyui-asd',
        date: '2016-05-04',
        name: '王小虎6',
        address: '上海市普陀区金沙江路 1516弄'
      }, {
        index: 6,
        objectId: 'tyui-xdg',
        date: '2016-05-04',
        name: '王小虎7',
        address: '上海市普陀区金沙江路 1517弄'
      }
      ],
      value1: null,
      secIndex: 0,
      pageSize: 3,
      pageSizes: [3, 5, 10],
      pageIndex: 1,
      tables: [],
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      idKey: 'objectId'
    }
  },
  mounted () {
    console.log('44444444444444444')
    this.find()
  },
  methods: {
    onShow () {
      this.multipleSelectionAll.forEach(item => {
        this.$message.success(item['name'])
      })
    },
    // 分页
    currentChange (pageIndex) {
      this.pageIndex = pageIndex
      this.find()
      console.log('currentChange-------------------------->>>>>>>>>>>>>>>>>>>>>')
    },
    sizeChange (pageSize) {
      // 改变每页显示条数的时候调用一次
      this.pageSize = pageSize
      this.find()
      console.log('sizeChange===========================>>>>>>>>>>>>>>>>>>>>>>>')
    },
    find () {
      this.changePageCoreRecordData()
      let start = this.pageSize * (this.pageIndex - 1)
      console.log('start=====>' + start)
      let end = this.pageSize * this.pageIndex
      console.log('end=====>' + end)
      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>