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