今天做的需求,需要可以选择二级和三级节点的部门,但是一级部门不让选
找了几篇文章,发现没有专门隐藏一级节点的,都是隐藏全部的节点,以下是隐藏全部节点的css
.el-cascader-panel .el-radio__input {
visibility: hidden;
}
那如何将一级节点的选择框隐藏呢
打开F12开始查看样式
可以看到这里应该可以通过id的最后一位来选到一级节点的这一栏
那么就可以通过id选择器来判断
通过 [id^="cascader-menu-"][id$="1"]。这个选择器使用了属性选择器语法,其中 ^ 符号表示属性值以 'cascader-menu-' 开头,而 $ 符号表示属性值以 '1' 结尾
代码如下:
注意:[id^="cascader-menu-"][id$="-0"] 后的div是一定要写的,因为需要选择这个id下的div中el-radio__input
如果不写这个div html中还有ul li 里面也还有 cascader-menu-xxx-0 的id 会造成某些节点的radio也隐藏掉
<el-cascader
ref="groupCascaderRef"
v-if="item.field_type_id == 45 && item.label.type == '3' && item.field_key === 'group' && item.field_attribute !== 1"
v-model="item.field_value"
:options="new_group_tree"
:props="{emitPath: false,value: 'label', checkStrictly: true}"
:disabled="item.field_attribute === 1"
style="width: 90%"
@change="data => handleGroupChange(data)"
/>
<style>
.el-cascader-panel [id^="cascader-menu-"][id$="-0"] div .el-radio__input {
display: none;
}
</style>