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

高高不想学习

已于 2022-08-04 11:31:41 修改

阅读量6k

点赞数 4

分类专栏：项目文章标签： vue javascript

于 2022-07-02 11:17:21 首次发布

本文链接：https://blog.csdn.net/weixin_49376462/article/details/125570047

版权

项目专栏收录该内容

7 篇文章 0 订阅

订阅专栏

需求描述：

做项目的时候遇到一个需求，表格中带多选框，表格所选的数据行可以显示（本人用的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片段:

<div class="right">
     <div class="title">
         已选<span
         class="clear"
         @click="handleCLearAll"
         style="color: #a0cfff; float: right; cursor: pointer"
         >清空全部
        </span>
     </div>
      <el-divider></el-divider>
     <template>
       <div v-if="selectedAccount.length > 0">
          <div
             class="rightTab"
              v-for="(item, index) in selectedAccount"
              :key="index"
            >
           <span class="rightText">{{ item.kcmc }}</span>
           <span class="rightClose" @click="cancelSelect(item)">X</span>
            <br />
           </div>
          </div>
        <div v-else class="no-selected">暂无选择</div>
     </template>
     <el-divider></el-divider>
     <div style="float: right">
         <el-button round @click="handleCreate">分配</el-button>
     </div>
</div>