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: ,
pageSize: ,
total: , // 随便定义一个形成分页的数字
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 - ] = selection
} else { // 全不选
this.multipleSelection[this.currentPage - ] = []
}
},
selectMemoryFn (val, row) { // 设置分页记忆二位数组方法
// 注意：val 传过来默认为数组类型 ，row 为 Object（当前选择数据对象）
let currentArr = this.multipleSelection[this.currentPage - ] // 当前分页对应数组
if (!currentArr) {
this.multipleSelection[this.currentPage - ] = val // 不存在这个二维数组，则创建这个二位数组
} else { // 存在
if (val.includes(row)) { // 选中
this.multipleSelection[this.currentPage - ] = val
} else { // 取消
delete currentArr[currentArr.indexOf(row)]
}
}
},
selectMemoriedDataFn () { // 分页记忆自动选中方法
let currentArr = this.multipleSelection[this.currentPage - ] // 当前分页对应被选中数据
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去判断二维数组存在性，多次循环，这一点有待优化）
如果有更好的解决办法，欢迎留言探讨！