原以为js中即便是学到了map可实际上也不会用到map,可我今天就遇到一个el-table分页查询,然后需要勾选表格内容,切换页码后回显勾选项的需求。
一开始想的是,把所有已勾选的数据用list来维护,可稍微一思索就发现这样实际执行起来还是有缺陷的,比如用于来回切换页码等场景稍微一复杂就容易乱套。还是应该记录每一条数据的信息,用户点击勾选的时候,用当前的勾选情况去跟已勾选的数据做一个比对。如果已记录的数据里存在当前列表中的勾选项,同时本次属于勾选状态,则不做处理。如果处于未勾选状态,则从用于记录的总数据中删除该选项。如果总得记录结果没有改数据,同时该数据本次是勾选状态,则把新数据添加进去。
用map是最好的了,于是就实战一下,试试手~
获取新数据
选择selection-change ,它会把当前页码的勾选项列出来。
接下来就是它对应的handle函数了,我把处理逻辑用备注的形式写出来
const selectedMap = new Map();
handleSelectionChange(val) {
// val 表示当前勾选项,属于array类型
// 我们首选需要一个list用来记录当前tableData都有哪些备选哪些没有被选上,我这里先用一个map记录当前表格中的备选项
// 然后遍历tableData 把已选项维护到一个list中
const currSelectMap = new Map();
for (let i = 0;
i < val.length;
i++) {
currSelectMap.set(val[i].name, true);
}const selectList = [];
this.tableData.forEach((item) => {
const name = item.name;
selectList.push({
name,
selected: currSelectMap.has(name) ? true : false,
});
});
// 遍历selectList,它记录了当前表格中每一项的一个唯一ID(我这里是name是唯一的),以及是否选中两个参数
// 遍历过程中与记录总的被选中的数据做一个比较,代码由本文前面的处理逻辑形成
selectList.forEach((item) => {
const name = item.name;
const selected = item.selected;
if (selectedMap.has(name) && !selected) {
selectedMap.delete(name);
}
if (!selectedMap.has(name) && item.selected) {
selectedMap.set(name, item);
}
});
console.log("selectedMap", selectedMap);
},
最后的最后,el-table切换页码时候还需要额外处理一下,
getRowKey(row) {
return row.name;
},
query() {
// 查询
this.tableData = https://www.it610.com/article/[
{
date:"2016-05-02",
name: "王小虎4",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎5",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎6",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎7",
address: "上海市普陀区金沙江路 1516 弄",
},
];
for (let i = 0;
i < this.tableData.length;
i++) {
//如果有的话,添加进去,把参数设置为true
const name = this.tableData[i].name;
if (selectedMap.has(name)) {
this.$nextTick(() => {
this.$refs.myTable.toggleRowSelection(this.tableData[i], true);
});
}
}
},
【el-table分页数据+回显+勾选状态+记录数据(map实战)】就是切换到新数据时,我们要打勾,但是通过代码打钩的过程会触发handleSelectionChange函数
这样就导致,可能就跟我们期待的差很多了,具体差到哪里,读者朋友可以把this.$nextTick去掉试试。
ps:能看到这篇文章的估计也有遇到类似问题哈哈
推荐阅读
- 如何理解js执行上下文
- 回调函数到promise再到理解async/await
- 夯实基础上篇-图解 JavaScript 执行机制
- JavaScript的几种继承方式
- JavaScript实现九九乘法表(四种方法)
- 如何在 JavaScript 中获得“准确的”倒计时
- 破解JavaScript高级玩法,成为精通 JS 的原生专家吾爱
- 一起动手实战图片懒加载
- 浅谈信息熵在数字体验监控领域的应用