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去判断二维数组存在性，多次循环，这一点有待优化）

如果有更好的解决办法，欢迎留言探讨！