vue element Table 多选框实现所选行显示与回显（带分页）

需求描述：

做项目的时候遇到一个需求，表格中带多选框，表格所选的数据行可以显示（本人用的tag显示），并且显示的后的数据如果取消则表格也会对应的取消掉。

PS:如果不是必要用表格并且不带分页的话很好实现，element-ui自带了穿梭框组件可以实现。

解决思路：

我用了一个map集合来存储目前所选的数据（因为要分页并且需要回显）map的键用来保存当前页，值用来保存当前页已选的数据。当选择表格中某一行时，触发 handleSelect 事件，将此次选择放入map中，放入之后遍历map的键值，将所有的键值组成一个数组，用 v-for 来遍历数组并展示。如果在所展示的tag标签中取消，就触发相应事件，并且通过 toggleRowSelection 来取消表格中所选行。回显就是拿到分页数据之后，用 nextTIck 通过map所在页的数据来更新dom，让表格显示之前已经选中的。

样式展示：

点击右边取消，左边也会对应取消

并且分页后，刷新页面的时候如果右边有对应数据，左边也是勾选状态

具体代码:

table的选择事件：

selectdAccount 是用来显示tag标签的数组

// 选择事件
    handleSelect(selection, row) {
      // console.log("选择的数据", selection, row);
      this.map.set(this.page - 1, selection);
      this.refersh();
    },
//刷新页面tag标签
    refersh() {
      let temp = [];
      let map = this.map;
      for (const [key, value] of map) {
        temp = [...temp, ...value];
      }
      this.selectedAccount = temp;
},

tag的取消选择事件：

tableDate是表格数据

cancelSelect(item) {
      let flag = false; //判断取消的数据是否在当前表格中
      if (item.page == this.page - 1) {
        flag = true;
      }
      let map = this.map;
      let gg = [];//表示取消数据所在页的所有数据
      if (flag) {
        //在当前表格页面中，需要重新更改表格
        gg = map.get(this.page - 1);
        for (let index = 0; index < gg.length; index++) {
          if (gg[index].kcdm == item.kcdm) {
            gg.splice(index, 1);
          }
        }
        this.map.set(this.page - 1, gg);
        this.$refs.multipleTable.toggleRowSelection(this.tableData[item.index]);
      } else {
        //不在当前表格
        gg = map.get(item.page);
        console.log(gg);
        for (let index = 0; index < gg.length; index++) {
          if (gg[index].kcdm == item.kcdm) {
            gg.splice(index, 1);
          }
        }
        this.map.set(item.page, gg);
      }
      this.refersh();//更新标签（右边）页面
    },

回显：

通过map拿到当前页数据之后一个一个与table中数据比较（因为展示的数据较少，所以没有问题，应该会有更好的解决方案，但是自己能力有限，想不到了，希望有更好方法的人可以留言讨论）

// 回显数据，调用的地方是在获取分页数据之后
    showPreSelected() {
      // $nextTick在下次dom更新循环结束之后回调，在修改数据之后使用，在回调中可获取更新后的Dom
      this.$nextTick(() => {
        let map = this.map;
        let gg = map.get(this.page - 1);
        gg.forEach((element) => {
          this.tableData.forEach((item) => {
            if (element.kcdm == item.kcdm) {
              this.$refs.multipleTable.toggleRowSelection(
                this.tableData[item.index],
                true
              );
            }
          });
        });
      });
    },

拿到数据之后执行回调：

watch: {
    dataList: function (newValue) {
      let i = 0;
      newValue.forEach((item) => {//处理拿到的数据
        item.index = i++;//赋当前页第几个值        
        item.page = this.page - 1;//所在页数值
      });
      this.tableData = newValue;
      this.showPreSelected();
    },
  },

templated片段:

     

         已选清空全部
        
     
      
     
     
     

         分配
     

总结：

文章受此文章启发所写 Element-table表格多选的使用_无语听梧桐的博客-CSDN博客_element table 多选

项目用的 renrenfaster 模板 ，挺好用的

地址：renren-security开发文档 - 人人开源

具体就这些，希望对各位有帮助的可以帮忙转推，本人也是第一次发文章，以后也会经常发，希望一直进步！