el-cascader 级联选择器-选中关闭面板

_大龄码农

已于 2022-03-24 18:04:40 修改

阅读量2.2k

点赞数

分类专栏： element Vue2.0 文章标签： javascript vue.js

于 2022-03-24 17:59:22 首次发布

本文链接：https://blog.csdn.net/qq_36229552/article/details/123717361

版权

Vue2.0 同时被 2 个专栏收录

12 篇文章

订阅专栏

element

10 篇文章

订阅专栏

本文讲述了如何在Vue中正确引用Cascader组件并设置其dropDownVisible状态。作者分享了在组件内部引用$refs的技巧，以及在change事件中控制下拉面板显示的问题解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

组件代码

<el-cascader ref="cascaderRef" v-else-if="item.type === 'cascader'" v-model="formSearch[item.value]" :options="item.options" :props="{ checkStrictly: true }" @change="cascaderChange"></el-cascader>

打印了发现 this.$refs.cascaderRef 是在数组里面的

所以这样是无效的this.$refs.cascaderRef.dropDownVisible = false
dropDownVisible 依然是 true

在这里插入图片描述

要这样写 this.$refs.cascaderRef[0].dropDownVisible = false

  cascaderChange(e) {
    console.log(e)
    console.log(this.$refs.cascaderRef, 'this.$refs.cascaderRef')
    this.$refs.cascaderRef[0].dropDownVisible = false
  }

状态改变，面板也成功收起来了
在这里插入图片描述