关于javascript:eltable分页数据回显勾选状态记录数据map实战

原以为 js 中即使是学到了 map 可实际上也不会用到 map，可我明天就遇到一个 el-table 分页查问，而后须要勾选表格内容，切换页码后回显勾选项的需要。
一开始想的是，把所有已勾选的数据用 list 来保护，可略微一考虑就发现这样理论执行起来还是有缺点的，比方用于来回切换页码等场景略微一简单就容易乱套。还是应该记录每一条数据的信息，用户点击勾选的时候，用以后的勾选状况去跟已勾选的数据做一个比对。如果已记录的数据里存在以后列表中的勾选项，同时本次属于勾选状态，则不做解决。如果处于未勾选状态，则从用于记录的总数据中删除该选项。如果总得记录后果没有改数据，同时该数据本次是勾选状态，则把新数据增加进去。
用 map 是最好的了，于是就实战一下，试试手~

<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 函数了，我把解决逻辑用备注的模式写进去

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 = [
        {
          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：能看到这篇文章的预计也有遇到相似问题哈哈