ElementUI Table 翻页缓存数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了ElementUI Table 翻页缓存数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

思路:

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

代码如下,直接拷贝可用…因为是个demo,数据是写死变化的,根据自己的业务替换吧.文章来源地址https://www.toymoban.com/news/detail-666113.html

<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>