解决点击某个级联项，不折叠问题（dropDownVisibl设置为false）

最新推荐文章于 2024-04-17 16:44:50 发布
最新推荐文章于 2024-04-17 16:44:50 发布
阅读量415 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SuperStarRiver/article/details/116243770
版权
本文介绍如何在使用Element UI的el-cascader组件时，实现级联选择器选中后自动关闭下拉框的JavaScript方法。通过`@change`事件监听，调用`this.$refs.cascaderRef.dropDownVisible = false`来操作状态。
摘要由CSDN通过智能技术生成

template:

 <el-cascader ref="cascaderRef"@change="handleChange"></el-cascader>

JS:
//级联选择器选择完改变时触发

 async handleChange() {
     this.$refs.cascaderRef.dropDownVisible=false
    },
SuperStarRiver
关注
Vue - Element UI 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
王佳斌
01-30 3870
vue，element ui，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，element UI级联选择器设置checkStr选择任意一级选项,只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，并且选中后
Vue3 - Element Plus 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
王佳斌
01-30 3506
vue3，element plus，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，element plus级联选择器设置checkStr选择任意一级选项,怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，
el-dropdown-item点击事件失效
weixin_56546815的博客
04-01 1231
在vue+element-ui项目中el-dropdown-item标签中加入点击事件。只需要把@click改成@click.native就可以了，然后保存-刷新-搞定
导航菜单，showHide插件 + Dropdown 下拉对象
weixin_30399871的博客
08-27 232
一，index.html文件 <!DOCTYPE html> <html lang="utf-8"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="stylesheet" href="css/base.css"&g...
使用Element-UI中的el-cascader 实现可以任意选择一项，以及遇到的坑
m0_61317636的博客
08-03 5767
现在我们要求可以选择任意一项，查阅官方文档 发现 使用 就可以达到我们的效果，但是 注意重点来了...至于原因 大家可以看这个 (13条消息) elementUi Cascader 级联选择器如何选择任意一级，以及所遇到的问题_WhiteSean的博客-CSDN博客_elementui级联选加载一级上边介绍的方法并没有什么卵用，大家只参考原因就行了，方便大家发散思维。既然知道了原因那么解决起来也是事半功倍看一下代码： 最主要的就是上边三句代码，那这三句怎么实现即要隐藏单选框又要把选择器收起呢，
对于vue的elementUi的el-cascader点击选中不关闭
weixin_44634052的博客
06-02 717
我相信大部分小伙伴用这句话就可以:this.$refs.catalogue.dropDownVisible = false。不过我这里这句话也是不生效的。就看下console 如下图。写成这样这个问题就行。
Vue使用Element的级联选择器Cascader，选中后下拉框自动关闭
fangqi20170515的博客
03-23 2390
在级联选择器@change方法中，监听变化，首先添加一个ref=“cascaderHandle”，在@change绑定的方法中监听：this.$refs.cascaderHandle.dropDownVisible = false;
【Element-ui】Cascader 级联选择器在emitPath设置为false时，选中内容后不显示。 问题原因及解决方法
Simle_Tiny_horse的博客
03-02 9818
Element-ui 级联选择器选中选项后不显示
74HC595 级联-时钟偏移问题.pdf
01-02
SN74HC595 级联应用中的时钟偏移问题是一个复杂的问题，需要从多方面进行分析和解决。但是，通过了解 SN74HC595 的基本知识和时钟偏移问题的产生原因，我们可以更好地设计和应用 SN74HC595 级联系统，提高系统的稳定...
MyBatis使用级联操作解决lombok构造方法识别失败问题
08-18
MyBatis使用级联操作解决lombok构造方法识别失败问题 MyBatis是一款优秀的持久层框架，可以帮助开发者快速实现数据持久化操作。然而，在使用MyBatis时，可能会遇到lombok构造方法识别失败的问题。本文将介绍如何...
Vue+Element 单选模式下Cascader级联选择器使用总结
fyydashen的博客
12-11 8063
一、单选模式下选择任意节点 在单选模式下，只能选择叶子节点，是因为父子节点存在关联。官方文档中写道：“可通过props.checkStrictly = true来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。” 使用示例： <el-cascader :props="{ checkStrictly: true }" :options="options"></el-cascader> 二、单选模式下选中节点后，关闭下拉框 在单选模式下，选中节点后，下拉框不会...
cascader遇到的坑（点击选中时，弹框不关闭；选择的内容回显是radio不显示选中状态；要求点击文字也可选择；）
菜同学的博客
05-13 4652
测试提了个bug，选择目录后选择框不自动关闭 点击了一下确实如此 这里我使用的是 elementUi 的 cascader 具体代码如下： <el-cascader ref="catalogue" v-model="exportForm.directIds" :options="catalogueList" :props="{value: 'id', label: 'directoryName', children: 'child...
AntDesign dropdown组件下拉菜单消失时间设置
最新发布
WebGIS的博客
04-17 537
在Ant Design中，下拉菜单（Dropdown）组件没有直接提供设置消失时间（即下拉菜单消失的延迟）的属性。不过，你可以通过组合使用其他组件来实现这个功能。以下是一个简单的例子，在这个例子中，当下拉菜单要隐藏时，我们设置了一个2000毫秒（即2秒）的延迟，然后在这个延迟结束后更新。这样，在2秒后，下拉菜单会隐藏，从而实现了一个“消失时间”的效果。一个常见的方法是使用。函数来实现这个功能。
element-ui 级联选择器cascader动态加载的问题
lgh1206的博客
02-22 3203
前段时间项目里有一个树状单位结构的需求，第一反应就是用elementui里的cascader 级联选择器来做。 本来以为是通过接口直接获取到所有单位树后配置一下就可以了，看了需求文档后发现原来是要通过动态加载的方式来获取。 需求： 1.进入页面之后根据当前的单位Id调用第一个接口来获取第一级的单位，并默认展示。 2.如果当前单位有下级单位则显示箭头，点击调用第二个接口获取下级单位。 很快啊，看着elementui官方文档，写了一个简单的demo，如下： <template> <di
el-cascader 级联选择器-选中关闭面板
qq_36229552的博客
03-24 1982
组件代码 <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发现dropDownVis.
记录：vue 让element-ui级联选择器选中后下拉框自动收起/解决懒加载后选择任意一级出现暂无数据
iseyre的博客
02-15 1358
【代码】记录：vue element-ui级联选择器选中后下拉框自动收起。
elementUi cascader 级联动组件 hover 收起二级菜单
青蛙背蝎子过河的博客
02-18 2847
最近一直和这个组件打交道, 有多个地方不太完美, 一开始领导让先这么用着, 后期再优化. 最近把几个不完美的地方优化了下. 写下此篇. 让遇到此问题的朋友少走类似的弯路. 先简单说下问题, 这个组件默认是点击option, 下拉框就隐藏. 但当我们开启了触发方式为hover的时候, 也就是expandTrigger: 'hover' 的时候. 这个时候点击option...
el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点、点击标签选中
热门推荐
风间琉璃c
03-24 2万+
el-cascader 动态加载选项 以及编辑时数据回显问题
ElementUI中Dropdown 下拉菜单el-dropdown-item 点击事件无效
Yjx的博客
08-10 5450
ElementUI
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值