Vue使用Element的级联选择器Cascader，选中后下拉框自动关闭

本文主要是介绍Vue使用Element的级联选择器Cascader，选中后下拉框自动关闭，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这个方法是我在这篇文章中学到的=》详细原理讲解
急着用可以先看看我这个简略版的，
在级联选择器@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();

这篇关于Vue使用Element的级联选择器Cascader，选中后下拉框自动关闭的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---