element级联选择器父子不关联，点击子级父级禁用，点击父级子级禁用，但是要求点击子级时对应父级有样式标注

项目场景：

要求对品类进行分级展示，父子级互不关联，点击父级，子级不可选，点击子级，父级不可选

---

问题描述

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)
          } )
          } )
    }
   }
 },

记得清空也是用以上逻辑