element el-cascader 点击单选按钮无法自动关闭

最新推荐文章于 2024-01-30 17:51:07 发布
最新推荐文章于 2024-01-30 17:51:07 发布
阅读量358 收藏
点赞数
文章标签： css3 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Riavera/article/details/123253475
版权 
组件中加个ref
![在这里插入图片描述](https://img-blog.csdnimg.cn/7fbe679f7d8d4297af01b1bbb246d5df.png#pic_center)
然后侦听器中做判断
![在这里插入图片描述](https://img-blog.csdnimg.cn/c89b7647953343cb8caf57d16c0ec57d.png)
主要是这个[0], 害我看了半天
山河丶丶
关注
Vue3 - Element Plus 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
王佳斌
01-30 3610
vue3，element plus，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，element plus级联选择器设置checkStr选择任意一级选项,怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，
vue2/3+element - 将级联选择器el-cascader修改为“点击文字就能选中“效果，单选/多选模式下点击label整行都可以直接选中，复选框多选模式下解决只能点击图标才能选中的问题
最新发布
高级前端工程师
07-23 2951
vue2，vue3，element plus，级联选择器，el-cascader，点击文字就能选中，如何修改成点label就能选中，单选，多选，复选框，单选框，模式，饿了么组件库，无法通过点击整行直接选中的问题，点击文字行就能选择后弹框收起，选中完弹框无法收起，级联选择 点击文本选中 多选，不生效，有问题，原来的功能受影响，点击文字可选中去掉单选按钮选中后菜单收起，ElementUI Cascader 级联选择器实现点击文本选中，懒加载的数据怎么办，动态数据请求，多选模式下点击label文本选择，点击文本直
element ui 级联选择器 cascader
qq_37672347的博客
04-01 458
cascader 参考链接 element ui 级联选择器 cascader 通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的，但是选中时 面板没有消失 只有自己去点击空白处才消失 ，如果处理？？？ ...
对于vue的elementUi的el-cascader点击选中不关闭
weixin_44634052的博客
06-02 737
我相信大部分小伙伴用这句话就可以:this.$refs.catalogue.dropDownVisible = false。不过我这里这句话也是不生效的。就看下console 如下图。写成这样这个问题就行。
cascader遇到的坑（点击选中时，弹框不关闭；选择的内容回显是radio不显示选中状态；要求点击文字也可选择；）
菜同学的博客
05-13 4811
测试提了个bug，选择目录后选择框不自动关闭 点击了一下确实如此 这里我使用的是 elementUi 的 cascader 具体代码如下： <el-cascader ref="catalogue" v-model="exportForm.directIds" :options="catalogueList" :props="{value: 'id', label: 'directoryName', children: 'child...
解决使用el-cascader时选择了某个值后下拉框无法关闭的问题.
chriscencen的博客
02-23 1434
在vue项目中使用级联选择框的时候遇到了一个问题,当选择了某个值后,下拉框无法自动隐藏,需点击下拉框之外的区域才能隐藏. <el-cascader ref="cascader" clearable placeholder="请选择区域" @change="changeCity" :show-all-levels="false" > </el-cascader> 需要在change事件里面关
Vue使用Element的级联选择器Cascader，选中后下拉框自动关闭
小钻风的博客
08-20 6957
这个方法是我在这篇文章中学到的=》详细原理讲解 急着用可以先看看我这个简略版的， 在级联选择器@change方法中，监听变化，首先添加一个ref="cascaderHandle"，在@change绑定的方法中监听：this.$refs.cascaderHandle.dropDownVisible = false; <el-cascader :options="optionData" ref="cascaderHandle" clearable :
Vue - Element UI 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
王佳斌
01-30 4042
vue，element ui，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，element UI级联选择器设置checkStr选择任意一级选项,只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，并且选中后
Element-ui： el-cascader 级联选择器 可以单独选择任意一级选项，去掉单选按钮
web18296061989的博客
03-08 2229
目标： 1、vue项目中需要使用el-cascader组件，由于官方有单选框，所以需要根据业务去掉单选框点击文字就可以选择任意一级的内容。 效果图如下： 期望：（可以选择任何一级，有三级情况下，想选择二级就选择二级，并且去掉单选框） 步骤如下： 1.先设置父子节点取消选中关联，从而达到选择任意一级选项的目的 代码： <el-cascader :props="{ checkStrictly: true }" popper-class='自定义类名' clearable></el-casc
element ui Cascader 选择任意一级选项 选中后 关闭弹框
casablancaGET的博客
12-14 817
使用 element-ui Cascader 级联选择器 组件在单选模式下,选中radio后将下拉关闭:(如下图) 由于文档里没有这个功能,网上搜了好多圈,都特么不负责任的这么写 [that.$refs.cascader.dropDownVisible = false],我特么试了好久好久,都不好用,难道是我姿势不对…我倒立试,空翻试,托马斯试…用遍了方法试…都不行,后来我将 ref=“elcascader” 打印一下发现,人家这里还有两层呢…* ****
element-ui dialog设置为点击弹窗以外的区域不关闭弹窗
weixin_38371427的博客
12-02 814
第一种: 在el-dialog标签中添加:close-on-click-modal="false" <el-dialog title="提示" :visible.sync="dialogVisible" :close-on-click-modal="false"> </el-dialog> 第二种:全局设置 main.js import ElementUI from 'element-ui' Vue.use(ElementUI) ElementUI.Dialog.prop
el-cascader 勾选内容后自动关闭内容选择面板
qq_17686345的博客
06-15 3540
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写法 ...
扩展element cascader选择任意一级节点的文字部分选中节点（一行代码）和选中后自动关闭面板
weixin_39703282的博客
07-29 1524
一行代码解决element cascader选择任意一级节点的文字部分选中节点和选中后自动关闭面板
使用ElementUI中级联选择器el-cascader的注意点
qq_43710066的博客
11-24 808
修改级联选择器中的props属性 从而达到在界面上显示我们自己数据的目的
element plus的el-cascader选择任意一级选项时，自动关闭选择面板
qq_31843417的博客
01-09 1564
ref("");refwatchif (val) {MouseEvent("click"));
关于element中联级选择器el-cascader单选，选中复选框联级模态框立即消失
Gemming_的博客
08-03 2048
如图，此联级选择器设置为单选，所以用户点击左侧单选框选中后，需要点击其他空白地方才选择框能消失，如果联级选择器在较小的dialog弹窗的表单中，点击其他地方，弹窗和选择器都直接消失了，用户体验非常的不友好，如果是单选的话，所以一旦选中的话，界面就没有必要显示了。想要实现选中立即隐藏这里可以使用this.$refs.[“联级选择器的ref值”].dropDownVisble = false,代码如下： //el-cascader的change事件,saveOrgTree是联级组件的ref checkedCh.
Element-ui： el-cascader 单选回显
07-29
要实现 el-cascader 的单选回显，你可以使用 v-model 绑定一个变量来保存选择的值，并且在初始化时给这个变量赋初值。 首先，在你的 Vue 组件中添加一个变量来保存选择的值，比如 `selectedValue`： ```javascript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值