需求:有父组件、嵌套子组件两个页面,父组件一块区域用于显示复选框,子组件一块区域用于拖拽内容时改变其在父组件中的位置、内容、选中效果。如下图
![](https://i-blog.csdnimg.cn/blog_migrate/488fef70f31445bed1377ee9147a9866.png)
因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);
}
},
![](https://i-blog.csdnimg.cn/blog_migrate/f80ac961e7ee255a6d86d45ff73ac903.png)