vue2.x及vue3.0 使用elementUI中的Cascader 级联选择器，点击立即关闭功能

已于 2022-05-26 00:31:12 修改
阅读量1.9k 收藏 6
点赞数 2
文章标签： vue.js elementui
于 2022-05-10 16:57:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq252750818/article/details/124692226
版权

在vue2.x版本中如果使用级联选择器想要点击任意一级立即关闭的话需要用refs获取当前实例并找到他的一个属性为：

this.$refs.cascaderRef._self.dropDownVisible = false

同时把elementui里面的checkStrictly属性设置为true 这个用的比较少，因为点击任意一级立即关闭用的地方比较少，$refs后面是你自己级联选择器上面绑定的ref

在vue3.0版本中没有dropDownVisible这个属性，他的意思是下拉可见 只要点击时把设置为false就可以点击后就关闭，但是3.0版本已经没有这个属性，同样通过ref获取属性和方法：

cascaderRef._value.popperVisible = false;

它变成了poperVisible 它意识是按钮可见，给它设置为false就可以点击任意一级就关闭级联选择器

qq252750818
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)
03-01
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在...
Element Cascader 级联选择器的使用示例
10-15
6. **data()**：在 Vue 实例中定义的 `data` 函数返回一个对象，其中的 `value` 和 `options` 是级联选择器所需的数据。在这个例子中，`options` 定义了一个包含指南和组件两个大类的层级数据结构。 7. **组件结构*...
Vue使用Element的级联选择器Cascader，在方法中清空选项
小钻风的博客
08-21 8127
最近使用vue写项目，用到的是ELement的框架，项目中有个地方用到了级联选择器，好多东西直接在官网都找不到。 我要实现点击清空以后，去调用一个和点击下拉选项不一样方法，做这个功能的时候，也找到了如何在方法中清空级联选择器的选项。 官网上只说明了想要清空级联选择器只需要添加一个clearable 原理就是在级联选择器上面绑定一个监听 1、首先添加一个 ref="cascaderHandle" 和clearable 2、在要清空的函数方法中this.$refs.cascaderHandle.checke
el-cascader 勾选内容后自动关闭内容选择面板
qq_17686345的博客
06-15 3325
element-plus 和element-ui的el-cascader面板关闭方式有点不同 element-ui的关闭方式 this.$refs.CascaderRef.dropDownVisible = false 而element-plus的关闭方式 CascaderRef.value.togglePopperVisible() // vue3.0写法 this.$refs.CascaderRef.togglePopperVisible() //vue2.0写法 ...
【区分vue2和vue3下的element UI Cascader 级联选择器组件，分别详细介绍属性，事件，方法如何使用，并举例】
最新发布
xiejunlan的博客
06-04 766
在Vue 2的Element UI和Vue 3的Element Plus中，（级联选择器）组件用于从嵌套的数据中进行选择。以下是对这两个版本下组件的属性、事件和方法的详细介绍，并附带示例。
Vue3级联选择（Cascader）
Mr Dear的博客
03-31 5538
Vue3+TS 以 Vue3选择框（Select）为基础封装的级联选择框组件，支持清除，搜索，自定义搜索过滤函数等等
element UI el-cascader 手动收起下拉方法
似水流年，举重若轻
03-01 1680
1.在元素上加ref，点击方法里 用this.$refs.xxx.dropDownVisible = false，这样就收起了。 <el-cascader ref="xxx" :options="options" :props="{ checkStrictly: true }" clearable @change="c"> </el-cascader> methods:{ c(v){ console.log(v)
vue3Ref 数组
a15875146214的博客
11-22 7140
在 Vue 2 中，在v-for中使用的refattribute 会用 ref 数组填充相应的$refsproperty。在 Vue 3 中，此类用法将不再自动创建$ref数组。要从单个绑定获取多个 ref，要将ref绑定到一个更灵活的函数上 (这是一个新特性)。 今天遇到了一个需求Cascader级联选择器，选中后下拉框自动关闭，给组件挂一个ref，@change里面用togglePopperVisible()就可以自动关闭，但是现在我的级联选择器是在v-for循环的列表里面，而且列...
Vue使用Element的级联选择器Cascader，选中后下拉框自动关闭
fangqi20170515的博客
03-23 2259
在级联选择器@change方法中，监听变化，首先添加一个ref=“cascaderHandle”，在@change绑定的方法中监听：this.$refs.cascaderHandle.dropDownVisible = false;
基于vue2.0实现的级联选择器
01-19
基于Vue的级联选择器，可以单项，二级， 三级级联，多级级联 web开发中我们经常会遇到级联选择器的问题，尤其是在表单中,无外乎几种情况： 单个级联 (下拉选择框，单选) 单个级联 (多项选择) 二级联动 （省份...
Vue+ElementUI 中级联选择器Bug问题的解决
10-15
在Vue和ElementUI框架中，级联选择器（Cascader）是一个常用组件，用于展示层级关系的数据。然而，实际开发过程中可能会遇到一些bug。本文将深入探讨其中一个常见问题及其解决方案。 问题描述： 在使用ElementUI的...
vue3 element plus获取el-cascader级联选择器选中的当前结点的label值 附vue2获取当前label
Taurus_666
09-16 3832
各位大佬，有时我们在处理级联选择组件数据时，不仅需要拿到id,还需要拿到label名称，但是通常组件直接绑定的是id,所以就需要我们用别的方法去拿到label,此处官方是有这个方法的，具体根据不同的element 版本进行分别处理。
elementUI 手动关闭级联选择器的弹框
qq_36281882的博客
04-24 539
【代码】elementUI 手动关闭级联选择器的弹框。
vue element-ui级联选择器选中后下拉框自动收起
在奔跑中寻找的博客
04-21 6287
Cascader 级联选择器 数据渲染 通过 :options=“options” 映射,让每一级都可以选择(选项前会有圆圈可勾选)设置属性 :props="{ checkStrictly: true }" 1、点击后下拉框自动收起实现 设置每次监听值变化的时候，把 dropDownVisible 属性设置为 false 即可。（虽说简单，但是这个属性我找了半天，官网根本没有说~~~~(>_...
element-plus 、element-ui —— Cascader 勾选内容后自动关闭内容选择面板
qq_53895518的博客
01-10 1314
最近工作需求是 el-Cascader 级联多选框 任意选择一项，自动关闭面板？来总结记录下。
自动关闭el-cascader、多选的el-select下拉框。
qq_43436160的博客
09-06 827
1. 关闭el-cascader。2.关闭多选的select。
el-select点击别处让下拉框消失
shengjon的博客
10-25 771
【代码】el-select点击别处让下拉框消失。
vue3.x使用Element plus的级联选择器el-Cascader
v5666666的博客
06-14 1022
在级联选择器@change方法中，监听变化，首先添加一个ref=“cascaderHandle”，在@change绑定的方法中监听： proxy.$refs.myCascader.dropDownVisible = false;Element plus 好像取消了 改为 可以实现
vue cascader级联选择器多选获取选中的value的值
06-08
如果你使用的是 element-ui 的 Cascader 组件，可以通过监听 `change` 事件来获取选中的值。示例如下： ```html <template> <el-cascader v-model="selectedOptions" :options="options" @change="handleChange" :props="{ multiple: true, value: 'id', label: 'name' }" ></el-cascader> </template> <script> export default { data() { return { options: [ { id: 1, name: 'Option 1', children: [ { id: 11, name: 'Option 1-1' }, { id: 12, name: 'Option 1-2' }, ], }, { id: 2, name: 'Option 2', children: [ { id: 21, name: 'Option 2-1' }, { id: 22, name: 'Option 2-2' }, ], }, ], selectedOptions: [], }; }, methods: { handleChange(value) { console.log('Selected value:', value); }, }, }; </script> ``` 在上述示例中，我们通过设置 `multiple: true` 来使 Cascader 组件支持多选。然后定义一个 `selectedOptions` 数组来绑定选中的值。在 `@change` 事件中，我们可以通过 `value` 参数来获取选中的值，它是一个数组类型。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值