el-table分页数据+回显+勾选状态+记录数据(map实战)

原以为js中即便是学到了map可实际上也不会用到map，可我今天就遇到一个el-table分页查询，然后需要勾选表格内容，切换页码后回显勾选项的需求。 一开始想的是，把所有已勾选的数据用list来维护，可稍微一思索就发现这样实际执行起来还是有缺陷的，比如用于来回切换页码等场景稍微一复杂就容易乱套。还是应该记录每一条数据的信息，用户点击勾选的时候，用当前的勾选情况去跟已勾选的数据做一个比对。如果已记录的数据里存在当前列表中的勾选项，同时本次属于勾选状态，则不做处理。如果处于未勾选状态，则从用于记录的总数据中删除该选项。如果总得记录结果没有改数据，同时该数据本次是勾选状态，则把新数据添加进去。 用map是最好的了，于是就实战一下，试试手~

```javascript <el-button @click="query"> 获取新数据</el-button> <el-table ref="myTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" > <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column type="selection" width="55"> </el-table-column> </el-table> ``` 选择selection-change ，它会把当前页码的勾选项列出来。 接下来就是它对应的handle函数了，我把处理逻辑用备注的形式写出来

```javascript 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切换页码时候还需要额外处理一下，

```javascript getRowKey(row) { return row.name; }, query() { // 查询 this.tableData = [ { 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); }); } } }, ``` 就是切换到新数据时，我们要打勾，但是通过代码打钩的过程会触发handleSelectionChange函数 这样就导致，可能就跟我们期待的差很多了，具体差到哪里，读者朋友可以把this.$nextTick去掉试试。 ps：能看到这篇文章的估计也有遇到类似问题哈哈