element ui 中级联选择器，点击完下拉框收回

el-Cascader 控件使用技巧
最新推荐文章于 2025-09-24 12:03:47 发布
原创 最新推荐文章于 2025-09-24 12:03:47 发布 · 824 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui

本文介绍如何在el-cascader控件中通过添加ref属性实现下拉菜单可见性的控制。具体方法是在el-cascader标签内添加ref属性，并利用$refs调用toggleDropDownVisible()方法来实现。

在el-cascader标签中添加ref属性，$refs中添加toggleDropDownVisible()方法

 

 

基于Element UI内置的Select下拉和Tree树形组件，组合封装的树状下拉选择器
WindfallSheng的博客
07-23 7450
基于Element UI内置的Select下拉和Tree树形组件，组合封装的树状下拉选择器
Vue Element 分组+多选+可搜索Select选择器实现示例
10-18
在Vue Element UI中，`Select`组件是一个常用的下拉选择器，它提供了丰富的功能，如分组、多选和搜索。在本示例中，我们将深入探讨如何将这些特性结合起来，实现一个完整的分组+多选+可搜索的`Select`选择器。 首先...
element-ui 弹出框点击弹出框以外的地方，收起弹出框
温柔雨哥的博客
04-07 948
在弹框加上这个属性即可，点击弹框意外隐藏弹框，false反之 :close-on-click-modal="true"
vue element-ui级联选择器选中后下拉框自动收起
ʚ菲菲的博客ɞ
02-25 1910
Cascader 级联选择器设置 严格的遵守父子节点不互相关联(checkStrictly: true)，此时每一级都可以选择(选项前会有圆圈可勾选)，实现点击选中后下拉框自动收起。 设置监听选择器值变化的时候，把 dropDownVisible 属性设置为 false 即可。 <el-cascader ref="deptIdCascader" v-model="updateInfo.deptId" :props="{checkStrictly: true}"&g
Element UI下拉菜单：Dropdown复杂交互场景
最新发布
gitblog_01056的博客
09-24 877
在现代Web应用开发中，下拉菜单（Dropdown）作为人机交互的关键组件，其设计质量直接影响用户操作效率。Element UI作为基于Vue.js 2.0的企业级UI组件库，提供了功能完备的Dropdown组件，支持从简单选择到复杂交互的全场景覆盖。本文将深入剖析Dropdown组件的实现原理与高级应用技巧，帮助开发者应对复杂业务场景下的交互挑战。 ## 组件架构解析 Element UI的...
cascader遇到的坑（点击选中时，弹框不关闭；选择的内容回显是radio不显示选中状态；要求点击文字也可选择；）
菜同学的博客
05-13 5562
测试提了个bug，选择目录后选择框不自动关闭 点击了一下确实如此 这里我使用的是 elementUi 的 cascader 具体代码如下： <el-cascader ref="catalogue" v-model="exportForm.directIds" :options="catalogueList" :props="{value: 'id', label: 'directoryName', children: 'child...
学会正确地二次封装组件，让同事抱着你的大腿喊大神！
qq_42365082的博客
06-06 8099
二次封装，是指因为业务上的需要，对element-ui、antd、e-chart等其他组件库，做二次封装。以下是常见的二次封装场景......
记录：vue 让element-ui级联选择器选中后下拉框自动收起/解决懒加载后选择任意一级出现暂无数据
iseyre的博客
02-15 1512
【代码】记录：vue element-ui级联选择器选中后下拉框自动收起。
Element-ui中 选择器（select）多选下拉框实现全选功能.zip
10-10
在这个特定的场景中，我们关注的是Element-UI中的选择器组件——`<el-select>`，特别是如何实现多选下拉框的全选功能。在实际应用中，全选功能常用于批量操作，如用户一次性勾选多个选项进行批量删除、导出等操作。 ...
基于Element的组件改造的树形选择器(树形下拉框)
10-15
在本文中，我们将深入探讨如何基于Element UI框架进行组件改造，特别是创建一个树形选择器（树形下拉框）。Element UI 是一个流行的 Vue.js UI 框架，提供了许多开箱即用的组件，如 el-select 和 el-tree。然而，在...
在element-ui的select下拉框加上滚动加载
12-12
在项目中，我们需要运用到很多来自后端返回的数据。...于是《在element-ui的select下拉框加上滚动加载》诞生了。 这里通过自定义封装vue指令进行封装。（什么是指令：官方指令叫v-on,v-model） 以下以element-ui中的sel
vue element Cascader 级联选择器 选择任意一级选项 点击收起，点击label选中等问题详解
热门推荐
@必意玲
03-06 7万+
1. 温馨提示：Cascader 级联选择器 选择任意一级 请切换到 2.12.0 最新版 2. 直接步入主题，先看下需求要实现的功能 就是一个级联联动效果，但是他是每一级都能够选择，可以看到既可以选商品组，还能选择商品组下面的团队长，也就是他的子级。 找到饿了吗的级联选择器，快捷访问地址：然后找到选择任意一级选项 点击跳转：Cascader 级联选择器 3. Cascader 级联选择...
toggle一个div，显示与隐藏，可以扩展成自定义下拉框
每天进步一点点
09-12 2271
$(function(){ //toggle div $("#gga").click(function(event){ event.stopPropagation(); //阻止冒泡事件 $(".toggleoption").slideToggle("fast"); }); //slideup div $(document).click(function(even
el-cascader 级联组件 聚焦 调用下拉菜单
Alex81320的博客
09-28 441
el-cascader 级联组件 聚焦
Vue + ElementUI 开发项目，遇到下拉框option 失去焦点时 不关闭的问题
weixin_43968963的博客
04-27 4339
问题描述： 使用Vue + ElementUI 框架开发项目且用了下拉加载更多，遇到了下拉框（el-select）中的option（el-option）失去焦点后，下拉框不隐藏，并在控制台报错**Uncaught TypeError: Cannot read properties of null (reading ‘disabled’) **，截图如下： 控制台报错： 不关闭的下拉选择框： 百度参考了其他文章之后得到的结果是使用了 el-dropdown 下缺少 el-dropdown-menu 元素
JS中出现“$(...).dropdown is not a function”错误的解决
干勾鱼的优快云博客
01-29 9643
使用bootstrap展示一个导航，众所周知使用bootstrap一般是需要加入jquery的，在我的js中出现了一个错误：$(...).dropdown is not a function如图所示：开始怎么也没发现错误，后来发现网上有出现这个问题的解释：说的很明确了，是jquery的js与bootstrap的js的顺序问题，jquery的js应该在前面。我的js开始顺序为：<script type
使用Element-UI中的el-cascader 实现可以任意选择一项，以及点击选中后下拉框自动收起
qp1101的博客
08-17 2501
使用Element-UI中的el-cascader 实现可以任意选择一项，以及点击选中后下拉框自动收起。
下拉列表dropdown取消默认点击隐藏及修复需要二次点击的方法
justforuse的博客
08-24 1万+
angular-ui专门为Angular项目提供了dropdown控件，指令形式为uib-dropdown。但是有的时候我们不希望点击下拉框的内容后，下拉框就隐藏。比如，如果下拉框内容是一个折叠列表之类的话，当我们点开列表后下拉框就隐藏了，而此时我们还没有选择我们要选择的元素。基于这种情况，我们需要对下拉框进行更多的控制。我们整体的结构可能是这样的：div(uib-dropdown) bu
element ui 在时间选择器下拉框底部添加选择今天功能
06-10
您可以在 Element UI 的 `TimePicker` 组件的下拉框底部添加一个“选择今天”按钮，来实现在时间选择器下拉框底部添加选择今天功能。具体实现方法如下： 1. 在 `TimePicker` 组件上添加 `ref` 属性，用于获取下拉框 DOM 元素： ``` <el-time-picker ref="timePicker" ... ></el-time-picker> ``` 2. 在 `mounted` 钩子函数中获取下拉框 DOM 元素，并在其底部添加“选择今天”按钮： ``` mounted() { const picker = this.$refs.timePicker.picker; const footerBtn = document.createElement('span'); footerBtn.textContent = '选择今天'; footerBtn.addEventListener('click', () => { picker.date = new Date(); // 设置日期为今天 picker.handleConfirm(); // 触发确认事件 }); picker.$el.querySelector('.el-time-panel__footer').appendChild(footerBtn); } ``` 在上述代码中，我们首先获取了 `TimePicker` 组件的下拉框 DOM 元素，然后在其底部添加了一个按钮，并监听其点击事件。当用户点击“选择今天”按钮时，我们会将日期设置为今天，并触发确认事件，从而完成日期的选择。 需要注意的是，由于 `TimePicker` 组件的底部有一个分割线，因此我们需要将“选择今天”按钮添加在分割线的上方。在上述代码中，我们通过 `querySelector` 方法找到了分割线对应的 DOM 元素，并在其之前添加了按钮。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值