el-checkbox在父子组件同时显示配合拖拽效果无法改变之前选中的值处理

最新推荐文章于 2024-05-16 10:58:49 发布

原创最新推荐文章于 2024-05-16 10:58:49 发布 · 405 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

前端专栏收录该内容

7 篇文章

订阅专栏

文章讨论了一个Vue.js应用中的父子组件交互，其中父组件包含复选框，子组件支持内容拖拽。在拖拽操作时，根据选项的选中状态（单选或多选），动态更新选中值和数组，维护数据一致性。通过事件发射器(my-event)传递更新信息。

需求：有父组件、嵌套子组件两个页面，父组件一块区域用于显示复选框，子组件一块区域用于拖拽内容时改变其在父组件中的位置、内容、选中效果。如下图

因el-checkbox-group增加了change事件，数据改变时会向其中增加一个用于存储选中值得数组，同时各个选项对象中也包含了当前值选中/不选中的字段，因此在拖动右侧选项时可做如下判断

singleEnd(evt){
      this.drag=false;
      //如果选项(单选/多选)存在选中的值，拖拽时将选中字段值更换
      if(this.childDetail.type==4){//单选组件
        if(this.childDetail.radioChoose){
          this.childDetail.radioChoose = evt.newIndex+1;//选中标识等于移动后的新标识
        }
      }else if(this.childDetail.type==6){//多选框组件
      let checkListData = this.childDetail.checkList;
        if(checkListData.length>0){
          //根据选项数组选中值重新构造选中数组
          this.childDetail.checkList = [];
          let getOptionList = this.childDetail.optionList;
          for(let k=0;k<getOptionList.length;k++){
            if(getOptionList[k].checked){
              this.childDetail.checkList.push(k);
            }
          }
        }
        console.log(this.childDetail);
        this.$emit('my-event',this.isShow);
      }
    },