el-table跨表格实现单选、全选

mySunshine921

已于 2022-06-20 16:04:17 修改

阅读量2.6k

点赞数 1

分类专栏： vue js element 文章标签： javascript 前端 vue.js element

于 2022-06-17 16:57:56 首次发布

本文链接：https://blog.youkuaiyun.com/lxhmm921/article/details/125330735

版权

js 同时被 3 个专栏收录

57 篇文章

订阅专栏

vue

36 篇文章

订阅专栏

element

4 篇文章

订阅专栏

该博客探讨了在Vue.js应用中处理多表格选择的问题。作者遇到的挑战是在取消选择时无法正确清除数据，以及在切换表格时保持已选中的项。解决方案涉及使用store来存储选中项，并通过自定义参数处理全选事件。博客还涉及到了数据操作、事件监听以及如何在组件销毁时清理存储的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

场景：一个页面多个表格，实现跨表格单选多选
实现多选：问题是取消多选的时候数据清空就无法将对应取消的数据给清除掉，然后这里需要给select-all事件增加自定义参数
问题二：切换表格选中会把之前的选的清空，在这里借助store来存一下值
在这里插入图片描述

@select-all="(selection) => { handleSelectAllChange(selection,index )}"

//切换checkbox
handleSelectionChange(list,row) {
      console.log(list,row)

      this.taskList.map((item) => {
        item.taskRequestitemList.map((citem)=>{
          if(this.selectTaskList.length>0){
            let findex=this.selectTaskList.findIndex(
              (a) => a.id == row.id
            )
            if(findex>-1){
              this.selectTaskList.splice(findex, 1);
              this.$store.dispatch('SetSelectTaskList',this.selectTaskList);
            }else{
              this.selectTaskList.push(deepClone(row));
              this.$store.dispatch('SetSelectTaskList',this.selectTaskList);
            }
          }else{
            this.selectTaskList.push(deepClone(row));
            this.$store.dispatch('SetSelectTaskList',this.selectTaskList);
          }
          
        })
        
      });
      this.$emit('getSelectTask',this.selectTaskList)
      console.log('this.selectTaskList',this.selectTaskList)
    },
    //全选
    handleSelectAllChange(list,index){
      console.log(list,index)
      if(list.length==0){
        this.taskList[index].taskRequestitemList.map((item)=>{
            let findex=this.selectTaskList.findIndex(
              (a) => a.id ==item.id
            )
           this.selectTaskList.splice(findex, 1);
        })
        this.$store.dispatch('SetSelectTaskList',this.selectTaskList);
      }else{
        list.map((item)=>{
           this.selectTaskList.push(item);
        })
        this.$store.dispatch('SetSelectTaskList',this.selectTaskList);
      }
       console.log('this.selectTaskList',this.selectTaskList)
      this.$emit('getSelectTask',this.selectTaskList)
    },

store
在这里插入图片描述

选中的任务直接存到store里
注：也有大佬提示说借助缓存，这种方式没有尝试；个人感觉用stroe会更好一点，最后要注意的是页面的销毁的时候注意清掉列表的值