工具：vue+elementUI
//“数据获取”的思路：
//1.勾选数据，获取到此数据
//2.若换页，在换页时，将数据保存在[当前页-1]中（二维数组的保存方式）
//3.点击提交时，需将二维数组降维(看后端接收需求)
//“记忆选取”的思路
//1.勾选成功，获取当前数据的索引并保存在[当前页-1]中（二维数组的保存方式）
//2.换页回来时，遍历当前页的数据索引，自动勾选上次勾选的值
首先，将需要用到的表格绘制出来。
先附上表格初始化的数据格式。
this.dataList = {
data: [{
date: '2016-05-02',
name: '赵一',
phone: '13067894531',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '贾二',
phone: '13067894522',
address: '上海市普陀区金沙江路 1517 弄'
}], // 此处省略剩余10条
pageInfo: {
currentPage: 1,
pageSize: 10,
returnCode: 12
}
};
表格绘制如图。
表格.png
表格的代码：
<div class="table-contain">
<el-table border :data="dataList.data" ref="multipleTable" style="width: 100%"
@select="handleSelectionChange"
@select-all="handleSelectionChange"
@selection-change="handleCheckedChange">
<el-table-column type="selection" width="38px"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="员工姓名"></el-table-column>
<el-table-column prop="phone" label="联系方式"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<el-row type="flex" justify="end" class="pagination-contain">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageInfoData.currentPage"
:page-sizes="[10, 20]"
:page-size="pageInfoData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="dataList.pageInfo.returnCode">
</el-pagination>
</el-row>
<div class="dialog-footer" slot="footer" style="text-align:center;">
<el-button type="primary" size="medium" @click="submit">确定</el-button>
<el-button type="info" size="medium">取消</el-button>
</div>
</div>
第一步 "数据获取"
data () {
return {
dataList: {},
pageInfoData: { currentPage: 1, pageSize: 10 },
lastCheckData: [], // 上次保存的值
selectData: [], // 选中的数据索引
checkList: [] // 临时选中的值
}
}
handleCheckedChange(rows) { // 选中的数据获取
this.checkList = []; // 初始化，防止重复添加
if (rows) {
rows.forEach(row => { // 遍历已选择的数据
if (row) {
this.checkList.push(row.name);
}
});
}
// console.log(this.checkList);
},
submit() { // 点击确定
this.lastCheckData[this.pageInfoData.currentPage - 1] = this.checkList; // 保存当前页获取的值
//降维 --- 二维数组降至一维数组
// let getList = Array.prototype.concat.apply([], this.lastCheckData); // 原始方法
let getList = this.lastCheckData.flat(); // ES6方法 flat() “拉平”嵌套数组
console.log(getList);
},
第二步 "记忆选取"
handleSelectionChange(selection, row) { // 选中的数据索引获取
this.selectData[this.pageInfoData.currentPage - 1] = []; // 初始化
this.dataList.data.forEach((item, index) => {
for (let i = 0; i < selection.length; i++) { // 遍历已选的数据重新填充数组
if (item.name === selection[i].name) { //补充：注意这里的判断必须要保证判断的值是唯一的（不一定要拿获取的值进行比较，比如ID值），不然遍历的时候会都添加进去
// console.log(index);
this.selectData[this.pageInfoData.currentPage - 1].push(index);
}
}
});
// console.log(this.selectData);
},
toggleSelection(rows) { // 判断是否选中
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
翻页的时候需加上
this.lastCheckData[this.pageInfoData.currentPage - 1] = this.checkList; // 保存当前页获取的值
this.pageInfoData.pageSize = val;
// 调完翻页查询的接口后，回调执行以下代码：
// 勾选上次已勾选的数据
let arr = [];
if (this.selectData[this.pageInfoData.currentPage - 1]) {
this.selectData[this.pageInfoData.currentPage - 1].forEach((item, index) => {
arr.push(this.dataList.data[item]);
});
}
// setTimeout(() => {
// this.toggleSelection(arr);
//}, 0);
// ES6
let setTime = new Promise((resolve, reject) => {
resolve(arr);
});
Promise.all([setTime]).then((results) => {
this.toggleSelection(arr);
});
若有更好更简单完善的方法，欢迎大牛指点！
有问题的也可留言哦~
参考链接：
table配合分页+数据回显
table翻页的记忆功能
