ElementUI Table 翻页缓存数据

Element UI Table 翻页保存之前的数据,网上找了一些,大部分都是用**:row-key** 和 reserve-selection ,但是我觉得有bug,我明明翻页了...但是全选的的个框还是勾着的(可能是使用方法不对,要是有好使的...请cute我一下...感谢)

所以自己写了一个...

思路:

• 手动勾选的时候,将数据保存
  查看文档,发现有两个手动勾选触发的方法 select 和 select-all,这两个返回的都是当前选中的数据,所以我们可以直接保存
• 回显的话,我们调用官网给的方法 toggleRowSelection()
  调用的位置在,请求数据的方法中,因为请求完数据后,数据一定是最新的,table列表一定会刷新...所以我们只要在 列表渲染的数据 里 找到 保存的数据 就将其勾选.

代码如下,直接拷贝可用...因为是个demo,数据是写死变化的,根据自己的业务替换吧.

<template>
  <!--table 翻页-->
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @select-all="selectionChange"
      @select="selectionChange"
    >
      <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>
    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="page.current"
      :page-size="page.pageSize"
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 4,
      page: {
        current: 1,
        pageSize: 2,
      },
      tableData: [
        {
          id: 0,
          date: '2016-05-03',
          name: '王小虎0',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          id: 1,
          date: '2016-05-03',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄',
        },
      ],
      multipleSelection: [],
    }
  },

  methods: {
    currentChange(val) {
      this.page.current = val
      this.getList()
    },
    sizeChange(val) {
      this.page.pageSize = val
      this.page.current = 1
      this.getList()
    },
    getList() {
      if (this.page.current === 1) {
        this.tableData = [
          {
            id: 0,
            date: '2016-05-03',
            name: '王小虎0',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            id: 1,
            date: '2016-05-03',
            name: '王小虎1',
            address: '上海市普陀区金沙江路 1518 弄',
          },
        ]
      } else {
        this.tableData = [
          {
            id: 2,
            date: '2016-05-03',
            name: '王小虎2',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            id: 3,
            date: '2016-05-03',
            name: '王小虎3',
            address: '上海市普陀区金沙江路 1518 弄',
          },
        ]
      }
      // 根据查询出来的数据,回显勾选状态
      this.$nextTick(()=>{
        this.tableData.forEach(row =>{
          if(this.multipleSelection.some((row1)=> row.id === row1.id)){
            this.$refs.multipleTable.toggleRowSelection(row)
          }
        })
      })
    },
    selectionChange(val) {
      this.multipleSelection = val
    },
  },
}
</script>