Element UI Table 翻頁保存之前的數(shù)據(jù),網(wǎng)上找了一些,大部分都是用**:row-key** 和 reserve-selection,但是我覺得有bug,我明明翻頁了…但是全選的的個框還是勾著的(可能是使用方法不對,要是有好使的…請cute我一下…感謝)
所以自己寫了一個…

思路:

• 手動勾選的時候,將數(shù)據(jù)保存
  查看文檔,發(fā)現(xiàn)有兩個手動勾選觸發(fā)的方法 select 和 select-all,這兩個返回的都是當(dāng)前選中的數(shù)據(jù),所以我們可以直接保存
• 回顯的話,我們調(diào)用官網(wǎng)給的方法 toggleRowSelection()
  調(diào)用的位置在,請求數(shù)據(jù)的方法中,因為請求完數(shù)據(jù)后,數(shù)據(jù)一定是最新的,table列表一定會刷新…所以我們只要在 列表渲染的數(shù)據(jù) 里 找到 保存的數(shù)據(jù) 就將其勾選.

代碼如下,直接拷貝可用…因為是個demo,數(shù)據(jù)是寫死變化的,根據(jù)自己的業(yè)務(wù)替換吧.文章來源地址http://www.zghlxwxcb.cn/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: '上海市普陀區(qū)金沙江路 1518 弄',
        },
        {
          id: 1,
          date: '2016-05-03',
          name: '王小虎1',
          address: '上海市普陀區(qū)金沙江路 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: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            id: 1,
            date: '2016-05-03',
            name: '王小虎1',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
        ]
      } else {
        this.tableData = [
          {
            id: 2,
            date: '2016-05-03',
            name: '王小虎2',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
          {
            id: 3,
            date: '2016-05-03',
            name: '王小虎3',
            address: '上海市普陀區(qū)金沙江路 1518 弄',
          },
        ]
      }
      // 根據(jù)查詢出來的數(shù)據(jù),回顯勾選狀態(tài)
      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>

到了這里，關(guān)于ElementUI Table 翻頁緩存數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！