elementUI 手动关闭级联选择器的弹框

已于 2023-09-21 17:01:22 修改
阅读量510 收藏
点赞数
文章标签： elementui vue.js javascript
于 2023-04-24 14:03:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36281882/article/details/130341410
版权 
<el-cascader
  ref="cascaderRef"
  v-model="choosedColumnsArr"
  :options="originColumns"
  :props="props"
  collapse-tags
  :getPopupContainer="(triggerNode) => triggerNode.parentElement"
  @change="handleChangeColumns"
  >
  </el-cascader>
this.$refs.cascaderRef.dropDownVisible = false;

善妒的蝎子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解关于element级联选择器数据回显问题
10-17
主要介绍了详解关于element级联选择器数据回显问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【Vue】el-cascader级联选择，点击文本选中，并且关闭下拉框
baidu_hxl的博客
09-06 3029
el-cascader级联选择默认选择radio时才可以选中，选择文本是选择不中的，将radio的宽高填满，这样点击文字也就能点到radio了，然后将.el-radio__input样式设置为不可见： <el-cascader :options="deptOptions" :props="{ label: 'deptName', value: 'deptId',emitPath: false, checkStrictly: true }" v-mo
el-cascader 手动触发关闭浮层
w_jiunian的博客
07-14 1181
el-cascader 手动触发关闭浮层
el-cascader解决可选择第一级，点击label标题选择，选择关闭
如果相遇，那么你好哦~
10-27 1318
el-cascader 是 Element 所提供的一个针对于级联选择的功能强大的组件，在大多数使用 Element 的项目开发中，基本都会使用到这个组件，因此，掌握好 el-cascader 组件是一个合格的前端工程师所必备的。在本文主要讲解了该组件的使用以及可能会遇到的一些问题，希望能够对各位读者有所帮助哦。
element ui Cascader 选择任意一级选项 选中后 关闭弹框
casablancaGET的博客
12-14 515
使用 element-ui Cascader 级联选择器 组件在单选模式下,选中radio后将下拉关闭:(如下图) 由于文档里没有这个功能,网上搜了好多圈,都特么不负责任的这么写 [that.$refs.cascader.dropDownVisible = false],我特么试了好久好久,都不好用,难道是我姿势不对…我倒立试,空翻试,托马斯试…用遍了方法试…都不行,后来我将 ref=“elcascader” 打印一下发现,人家这里还有两层呢…* ****
element-ui中的级联选择在选择完成之后那个弹框不会自动收起，应该如何让我们选择完成之后就让弹框自动收起呢?
m0_66226018的博客
07-06 888
我们只需要监听一下cascadrValue这个v-model就可以了，这样我们的问题就解决了。
el-popover中使用el-date-picker时时间弹窗无法关闭问题
小超人拯救大世界的博客
02-17 2230
记录开发中遇到的问题和解决，el-popover中使用el-date-picker时时间弹窗无法关闭问题
vue2.x及vue3.0 使用elementUI中的Cascader 级联选择器，点击立即关闭功能
qq252750818的博客
05-10 1900
在vue2.x版本中如果使用级联选择器想要点击任意一级立即关闭的话需要用refs获取当前实例并找到他的一个属性为： this.$refs.cascaderRef._self.dropDownVisible = false 同时把elementui里面的checkStrictly属性设置为true 这个用的比较少，因为点击任意一级立即关闭用的地方比较少，$refs后面是你自己级联选择器上面绑定的ref 在vue3.0版本中没有dropDownVisible这个属性，他的意思是下拉可见 只要点击时把设置
基于vue2.0实现的级联选择器
01-19
基于Vue的级联选择器，可以单项，二级， 三级级联，多级级联 web开发中我们经常会遇到级联选择器的问题，尤其是在表单中,无外乎几种情况： 单个级联 (下拉选择框，单选) 单个级联 (多项选择) 二级联动 （省份...
country-data:基于elementUI的Cascader 级联选择器的城市数据
05-14
country-data基于elementUI的Cascader 级联选择器的城市数据用法：参考链接：
【JavaScript源代码】elementUI实现级联选择器.docx
12-28
elementUI实现级联选择器 　本文实例为大家分享了elementUI实现级联选择器的具体代码，供大家参考，具体内容如下　1、从后端调用接口，传递数据到前端　2、使用VUE代码显示级联选项　 :disabled="isDisabled"　:...
Cascader 级联选择器 最后一级自动填充内容并关闭弹框
weixin_45473138的博客
12-22 1154
elementUI Cascader 级联选择器 如何实现选择任意一级选项，最后一级自动填充内容并关闭弹框？ 官网中的示例是不可以自动关闭的 代码如下 <el-form-item label="选择："> <el-cascader v-model="abc" :options="abs" :props="optionsProp" clearable
vue3 element Plus Cascader 选择任意一级选项 选中后 关闭弹框 & 获取最后一层的label
最新发布
Queen_sy的博客
03-12 628
getAttributeData函数里添加这行代码。placeholder="类选择"2.获取最后一层的label。获取选择的label。
element ui el-select点击图标无法关闭下拉框问题
woyaojinali的博客
06-30 2699
element ui el-select点击图标无法关闭下拉框问题 当el-select设置了filterable 筛选的时候 点击图标无法关闭下拉框 思路：利用visible-change方法获取下拉框打开和关闭事件，然后focus方法拿到鼠标事件 上代码： <template> <el-select v-model="value" filterable placeholder="请选择"> <el-option v-for="item in o
通过自定义指令,解决弹窗内容滚动时el-select下拉框,超出显示范围问题.
白云苍狗
06-27 3226
el-select下拉框超出显示范围问题,通过自定义指令,让el-select下拉框自动收回
Element DatePicker 清空按钮点击不关闭日期选择框
pon的博客
10-19 2103
Element DatePicker 清空按钮点击不关闭日期选择框
下拉框弹窗/基于element ui/自定义selectdialog
小谭鸡米花的博客
04-14 2496
小谭最近遇到一个需求：因为下拉选项过多，用el-tree对于逐级寻找很不方便，于是小谭就自己手写了个下拉框弹窗，废话不多说，上效果图：页面展示： 基本上和普通下拉框一样点击下拉框弹出的弹窗： 弹窗内最多可以实现三级下拉如果想实现更多，可以自己根据源码更改哦。
去除element-ui下拉框的下拉箭头
qianluo111的博客
09-16 6261
去除element-ui下拉框的下拉箭头
element UI select 手动收起下拉区域
m0_47005349的博客
06-01 4589
给select标签添加ref属性如下 <select v-model="" ref=“configSelect” @change=""> js控制手动关闭： this.$refs.configSelect.blur();
elementui城市级联选择器
09-15
ElementUI 中的城市级联选择器是一个非常常用的组件，可以帮助用户在一个区域选择省、市和区县。要使用城市级联选择器，你需要按照以下步骤进行设置： 1. 安装 ElementUI：首先确保你已经安装了 ElementUI，可以通过 npm 或者 yarn 进行安装。 2. 引入级联选择器组件：在你的项目中找到需要使用城市级联选择器的页面或组件，并在该页面或组件中引入级联选择器组件。在 Vue 文件中，可以使用 import 语句引入： ```javascript import { Cascader } from 'element-ui'; ``` 3. 使用级联选择器组件：在你的页面或组件中使用 Cascader 组件，并为其绑定相应的数据和事件处理方法。 ```html <template> <cascader :options="options" :props="props" v-model="selectedCity" @change="handleCityChange" ></cascader> </template> <script> export default { data() { return { options: [], // 城市数据源 props: { value: 'value', label: 'label', children: 'children', }, selectedCity: [], // 选中的城市 }; }, methods: { handleCityChange(value) { console.log('选中的城市:', value); }, }, }; </script> ``` 4. 加载城市数据源：在获取城市数据源的方法中，将数据源赋值给 options 变量，以便级联选择器组件能够正确显示和选择城市。 ```javascript import cityData from './cityData'; // 城市数据源 // ... data() { return { options: cityData, // 城市数据源 // ... }; }, ``` 5. 自定义城市数据源：你可以根据需要自定义城市数据源，以适应你的项目要求。 以上是使用 ElementUI 的城市级联选择器的基本设置步骤。你可以根据自己的需求进行相应的样式和逻辑定制。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值