Element UI提供了Cascader 级联选择器
的组件,使用它我们可以非常方便的创建类似省/市/县级联选择的交互UI,同时也提供了选择任意一级选项
配置,该功能可让父子节点取消关联,选择任意一级选项。但是改功能默认存在两个问题:
- 鼠标点击文本无法选中,必须点击相应的单选radio/和多选checkbox才能选中
- 单选的情况下,鼠标书中后不能自动隐藏下拉菜单


下面针对上述两个小问题完成代码的改进:
<template>
<el-row>
<el-col :span="8">
<span class="demonstration">单选选择任意一级选项</span>
<el-cascader
ref="singleCascader"
:options="options"
:props="{ checkStrictly: true }"
clearable
@change="handleChange"
></el-cascader>
</el-col>
<el-col :span="8">
<span class="demonstration">多选选择任意一级选项</span>
<el-cascader
ref="multipleCascader"
:options="options"
:props="{ multiple: true, checkStrictly: true, expandTrigger: 'hover' }"
clearable
@change="handleChange"
></el-cascader>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "设计原则"
},
{
value: "daohang",
label: "导航"
}
]
}
]
};
},
methods: {
handleChange(newVal) {
// 单选选中时隐藏下拉菜单
this.$refs.singleCascader.dropDownVisible = false;
}
}
};
</script>
<style lang="scss">
.el-cascader-menu {
.el-radio,
.el-checkbox {
display: table;
vertical-align: middle;
width: 90%;
height: 100%;
position: absolute;
box-sizing: border-box;
margin-left: -20px;
padding-left: 10px;
}
// 隐藏掉单选的radio和多选的checkbox
.el-radio__inner,
.el-checkbox__inner {
display: none;
}
}
</style>
这篇文章目前没有评论