el-cascader级联框动态显示复选框

需求是当点击A按钮时，级联框中的第一级和第三级显示复选框，第一级选中时，第三级对应第一级的所有数据选中，不包含第二级的数据。当点击B按钮时，级联框中的第二级和第三级显示复选框，父子级不关联。

首先，隐藏复选框需要通过css控制，代码如下(此处隐藏的是第二级的复选框)

<style lang="scss">
.el-cascader-panel {
  .el-scrollbar:nth-child(2) {
    .el-checkbox {
      display: none;
    }
  }
}
</style>

此处控制的是页面所有的级联都会使用这个样式，也会影响到项目中的其他使用级联框的页面，给父级直接加类名不生效，因为级联框选择时浮层的父级是body，添加class需要通过文档中的属性添加；

结合需求中的动态隐藏显示，popper-class需要动态绑定，然后根据需求修改isSelectUser的值，在css中添加父级就可以实现了。

数据父子是否关联通过动态修改props属性中的checkStrictly可以实现

代码如下

<el-cascader
                ref="casca"
                v-model="form.receiveUnitList"
                :options="selects.userTreeForReceiveUnit"
                :props="cascProps"
                placeholder="请选择接收单位"
                :show-all-levels = "false"
                :popper-class="isSelectUser ? 'has-second-check' : 'has-first-check'"
                filterable
                clearable
              </el-cascader>

data() {
  return {
    // 复选框是否显示
    isSelectUser: true,
    // props属性  checkStrictly:父子关联
    cascProps: { checkStrictly: true , emitPath:false,multiple :true}
   }
}


methods:{
  changeCasc() {
      this.isSelectUser = false,
      // 去掉checkStrictly属性   进行父子关联
      this.cascProps = { emitPath:false,multiple :true}
  }
}


<style lang="scss">
.has-first-check .el-cascader-panel {
  .el-scrollbar:nth-child(2) {
    .el-checkbox {
      display: none;
    }
  }
}
.has-second-check .el-cascader-panel {
  .el-scrollbar:first-child {
    .el-checkbox {
      display: none;
    }
  }
}
</style>