用的是element-plus中的联级选择,没有最前面的勾选,支持选择任意一级,选中之后下拉框直接消失。
<el-cascader
ref="refCascader"
v-model="appNameList"
:options="childrenTree"
:props="props"
filterable
clearable
style="width: 240px"
popper-class="dropDownPanel"
@change="getServerName"
/>
//鼠标移入自动出现下一级,支持勾选任意一级
const props = {
expandTrigger: "hover" as const,
checkStrictly: true
};
//通过change改变每次给下拉框赋值false
const getServerName = eve => {
refCascader.value.togglePopperVisible(false);
};
//隐藏下拉框前的勾选按钮
<style lang="scss">
.dropDownPanel {
.el-cascader-panel .el-cascader-menu .el-radio {
position: absolute;
width: 155px;
opacity: 0;
.el-radio__input {
// 单选按钮
opacity: 0;
}
.el-radio__input.is-checked {
// 选中的额单选按钮
opacity: 0;
}
}
}
</style>