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

场景:一个页面多个表格,实现跨表格单选多选 实现多选:问题是取消多选的时候数据清空就无法将对应取消的数据给清除掉,然后这里需要给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会更好一点,最后要注意的是页面的销毁的时候注意清掉列表的值

经验分享 程序员 微信小程序 职场和发展