这个方法是我在这篇文章中学到的=》详细原理讲解
急着用可以先看看我这个简略版的,
在级联选择器@change方法中,监听变化,首先添加一个ref="cascaderHandle"
,在@change绑定的方法中监听:this.$refs.cascaderHandle.dropDownVisible = false;
<el-cascader
:options="optionData"
ref="cascaderHandle"
clearable
:props="{ expandTrigger: 'hover',checkStrictly :true}"
:show-all-levels="false"
@change="close">
</el-cascader>
close(val){
console.log(val)
this.$refs.cascaderHandle.dropDownVisible = false; //监听值发生变化就关闭它
}
级联选择器单选框,只能点击前面的圆形按钮才可以选中,现在想要点击文字也可以直接选中。
加一个插槽,并且绑定一个点击事件,
<span slot-scope="{data}" @click="clickNode">{{ data.label }}</span>
点击事件里一句话就可以搞定
$event.target.parentElement.parentElement.firstElementChild.click();