需求是当点击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>