文章目录
- 一、前言
- 二、实现
- 2.1、设置`popper-class`和`multiple`
- 2.2、设置样式
- 三、最后
一、前言
element-ui
中el-cascader
级联选择器只有最后一级可以多选,其它级只有展开子节点的功能,如下图所示:
可以观察到最后一级的li
节点上没有属性aria-haspopup="true"
,可以通过这个来隐藏非最后一级节点的el-checkbox
来解决此问题
二、实现
2.1、设置popper-class
和multiple
设置属性popper-class
自定义浮层类名为popper-select
,把props
属性中的multiple
设置为true
,开启多选
<el-cascader
:options="options"
popper-class="popper-select"
:props="{
multiple: true
}"
/>
2.2、设置样式
选中li
属性aria-haspopup
为true
的标签,隐藏此标签下的el-checkbox
选择框。
注意:
style
标签中不要加scope
.popper-select {
li[aria-haspopup="true"] {
.el-checkbox {
display: none;
}
}
}
三、最后
本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕