Element 级联选择器(Cascader)点击文字(或者一行)选中样式回显
预览图
实现的效果
1、选中最后一级,下拉框收缩
2、下拉框的每一行点击都可以选中
3、点击radio,也能实现选中最后一级,下拉框收缩
组件代码
<el-cascader
ref="cascaderHandleRef"
v-model="languageIds"
class="width-260"
:options="languageList"
:props="{
checkStrictly: true,
expandTrigger: 'hover',
value: 'id',
label: 'path' }"
@change="changeLanguage"
clearable>
<span slot-scope="{node, data}" style="margin-left: -10px;padding-left:10px;display:block;" @click="clickNode($event, node)">{{ data.path }}</span>
</el-cascader>
data
languageList: [],
languageIds: [],
方法
clickNode ($event, node) {
$event.target.parentElement.parentElement.firstElementChild.click();
},
changeLanguage(node) {
// 选中最后一级,下拉框收缩
if (!this.$refs.cascaderHandleRef.getCheckedNodes()[0]?.hasChildren) {
this.$refs.cascaderHandleRef.dropDownVisible = false;
}
},