项目场景:
要求对品类进行分级展示,父子级互不关联,点击父级,子级不可选,点击子级,父级不可选
问题描述
element级联选择器中父子不关联属性:props="{ checkStrictly: true }",设置后符合功能逻辑,但是要求样式上面实现点击子级父级框上有横岗标注,如图所示,父子级为互斥状态
解决方案:
可观察到点击子级时,在元素中,父级自动添加了类名,取消即消失,所以可以通过控制该类名进行样式调整
.in-checked-path .el-checkbox__input.is-disabled .el-checkbox__inner::before {
content: "";
position: absolute;
display: block;
background-color: #000;
height: 2px;
transform: scale(0.5);
left: 0;
right: 0;
top: 5px;
}
补充
父子级互斥的禁用逻辑如下:
// 弹框级联交互
changeCasCadar(value) {
if(this.form.Category_Brand == 'Category') {
if(value.length > 0) {
const checkedNodes = this.$refs['cascaderDialog'].getCheckedNodes()
console.log("checkedNodes",checkedNodes)
if(checkedNodes[0].level == 1) {
Options.selectCategoryOptions.forEach( item => {
item.children.forEach( v => {
this.$set(v,'disabled',true)
} )
} )
} else {
Options.selectCategoryOptions.forEach( item => {
this.$set(item,'disabled',true)
})
}
}
else {
Options.selectCategoryOptions.forEach( item => {
this.$set(item,'disabled',false)
item.children.forEach( v => {
this.$set(v,'disabled',false)
} )
} )
}
}
},
记得清空也是用以上逻辑