el-cascader 手动触发关闭浮层

最新推荐文章于 2024-07-19 17:34:35 发布

夏木。。。

最新推荐文章于 2024-07-19 17:34:35 发布

阅读量1.3k

点赞数

分类专栏： vue-js 文章标签：前端 elementui vue.js

本文链接：https://blog.csdn.net/w_jiunian/article/details/125777927

版权

vue-js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中使用Element UI的Cascader组件进行数据选择。通过设置`options`属性绑定数据，`props`定义选项结构，包括'value'、'label'和'children'字段。同时，`@change`事件处理选择后的操作，`hideCascaderInp`方法用于关闭浮层。当方法失效时，可通过打印`this.$refs.cascaderInp`来排查问题。

摘要由CSDN通过智能技术生成

<el-cascader
  popper-class="cascader-box"
  ref="cascaderInp"
  :options="options"
  @change="hideCascaderInp"
  :props="optionProps"
  v-model="val"
  style="width: 100%"
  :clearable="true"
  :show-all-levels="false"
></el-cascader>

options=>数据
props=>配置
optionProps:{
    value: 'agencyCode',
    label: 'agencyName',
    children: 'childrenList',
    checkStrictly: true,
    emitPath: false
}


//关闭浮层
hideCascaderInp(){

      this.$refs.cascaderInp[0].dropDownVisible = false

}

如果方法失效，可打印  this.$refs.cascaderInp