element-ui框架中的table表格实现分页记忆

 <el-table :row-key="getRowKey" @select-all="handleSelectionAllChange" @select="handleSelectionChange"
      :data="tableData" style="width: 100%" height="300px">

Element-ui官方解释

row-key：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Functio

select-all:当用户手动勾选全选 Checkbox 时触发的事件

select:当用户手动勾选数据行的 Checkbox 时触发的事件

代码实例：

<template>
  <div>
    <el-table :row-key="getRowKey" @select-all="handleSelectionAllChange" @select="handleSelectionChange"
      :data="tableData" style="width: 100%" height="300px">
      <el-table-column type="selection" width="55" :reserve-selection="true">
      </el-table-column>
      <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>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page.sync="currentPage" :page-size="pageSize" :page-sizes="[30, 100, 200, 300, 400]"
      layout="total, prev, pager, next" :total="tableDataAll.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableDataAll: [],
      currentPage: 1,
      pageSize: 30,
      selectedList: [], //勾选的数据
    }
  },
  created() {
    for (let index = 0; index < 300; index++) {
      this.tableDataAll.push({
        Id: index,
        date: index,
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      })
    }
    this.getPage()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getPage()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getPage()
    },
    getPage() {
      let nowIndex = this.pageSize * (this.currentPage - 1);
      let size = nowIndex + this.pageSize
      this.tableData = this.tableDataAll.slice(nowIndex, size)
    },
    //全现多框的切换
    handleSelectionAllChange(val) {
      let arrAll = JSON.parse(JSON.stringify(val));
      this.selectedList = arrAll;
    },

    // 批量操作的id
    getRowKey(row) {
      return row.Id;
    },
    //现多框的切换
    handleSelectionChange(val, row) {
      let arrAll = JSON.parse(JSON.stringify(val));
      if (this.selectedList.filter((item) => item.Id == row.Id).length == 0) {
        this.selectedList = arrAll;
      } else {
        this.selectedList = arrAll.filter((item) => item.Id !== row.Id);
      }
    },
  }
}
</script>