el-table復選框分頁記憶

el-table 結合 el-pagination 實現分頁后默認是沒有復選框記憶功能的，對於這樣的需求，無奈又只能硬着頭皮上，試了網上的一些方法，沒奏效，便自己上了。

簡單的用法如下：

<template>
  <div class="table-demo">
    <el-table
      ref="multipleTable"
      :data="rowData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="changeFun"
      @select="selectMemoryFn"
      @select-all="selectAll"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="{ row }">{{ 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
      layout="prev, pager, next"
      :total="total"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getAddressList } from '../api/getData'
export default {
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 12, // 隨便定義一個形成分頁的數字
      rowData: [], 
      multipleSelection: [], // 選中的數據二維數組
      ids: [] // 選中的數據id數組
    }
  },
  methods: {
    changeFun (val) { // 保存已選數據id到數組，供后續操作（與分頁記憶無關）
      this.$nextTick(() => {
        let ids = []
        this.multipleSelection.forEach(L => L.forEach(M => ids.push(M.id)))
        this.ids = ids
      })
    },
    selectAll (selection) { // 全選切換方法 if (selection.length) { // 全選
        this.multipleSelection[this.currentPage - 1] = selection
      } else { // 全不選
        this.multipleSelection[this.currentPage - 1] = []
      }
    },
    selectMemoryFn (val, row) { // 設置分頁記憶二位數組方法
      // 注意：val 傳過來默認為數組類型 ，row 為 Object（當前選擇數據對象）
      let currentArr = this.multipleSelection[this.currentPage - 1] // 當前分頁對應數組 if (!currentArr) {
        this.multipleSelection[this.currentPage - 1] = val // 不存在這個二維數組，則創建這個二位數組
      } else { // 存在 if (val.includes(row)) { // 選中
          this.multipleSelection[this.currentPage - 1] = val
        } else { // 取消
          delete currentArr[currentArr.indexOf(row)]
        }
      }
    },
    selectMemoriedDataFn () { // 分頁記憶自動選中方法
      let currentArr = this.multipleSelection[this.currentPage - 1]  // 當前分頁對應被選中數據 if (currentArr && currentArr.length) { // 存在則繼續執行
        let tempRowsIDs = this.rowData.map(L => L.id) // 當前分頁被選中數據的id集合
        currentArr.forEach((item, index) => { // 遍歷當前分頁被選中數據 if (tempRowsIDs.includes(item.id)) { // id匹配上，則選中
            this.$refs.multipleTable.toggleRowSelection(this.rowData[tempRowsIDs.indexOf(item.id)])
          }
        })
      }
    },
    handleCurrentChange (val) { // 分頁切換，重新加載數據
      this.currentPage = val
      this.init()
    },
    async init () {  // 初始化獲取數據
      let res = await getAddressList({ page: this.currentPage })
      this.rowData = res.rows
    }
  },
  watch: {
    rowData (oldVal, newVal) { // 監聽數據變化，然后執行分頁記憶自動選中回調
      this.$nextTick(() => {
        this.selectMemoriedDataFn()
      })
    }
  },
  created () {
    this.init()
  }
}
</script>

解決思路：

     1. 創建一個二維數組對應每個分頁，每次選中、取消的回調里去判斷操作數據是否在對應二位數組元素里，然后再進行添加或刪除。

     2. 監聽每次表格數據變化，然后去執行記憶選中回調。（記憶回調里繞了一個彎，通過id去判斷二維數組存在性，多次循環，這一點有待優化）

如果有更好的解決辦法，歡迎留言探討！