Element-ui Cascader 级联选择器 点击lable 选中 以及选中收缩下拉框

最新推荐文章于 2024-06-12 18:03:07 发布
原创 最新推荐文章于 2024-06-12 18:03:07 发布 · 1.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用Element-ui的Cascader组件实现点击标签即可选中并自动收起下拉框的功能。通过设置ref和监听@change事件，结合自定义的mounted钩子内的点击事件，实现了更加便捷的交互体验。

Element-ui Cascader 级联选择器 点击lable 选中 以及选中收缩下拉框


选中隐藏下拉框主要运用ref="cascaderHandle"并且在@change绑定的方法中监听：this.$refs.cascaderHandle.dropDownVisible = false;
仅供参考 自我记录.

效果图如下:
Cascader任意一级选项效果图

          <el-cascader
            ref="cascaderHandle"
            size="small"
            clearable
            style="width: 100%"
            v-model=
最低0.47元/天 解锁文章
Vue - Element UI 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
🏆 前端领域优质创作者
01-30 5324
vue，elementui，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，elementUI级联选择器设置checkStr选择任意一级选项,只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，并且选中后
Element-UI cascader级联选择器，任意选择（父级也可）
孤舟行客
07-28 5712
Element-UI cascader级联选择器，任意选择（父级也可） <el-cascader ref="cascader" v-model="queryData.code" :options="options" :props="{ checkStrictly: true, expandTrigger: 'hover', emitPath: false }" > <template slot-scope="{ node, data }"> <div class=
修改ElementUI中el-cascader级联组件单选样式：点击文字选中且自动收起选择面板
ThisEqualThis的博客
05-28 5285
先上效果图： 效果为：鼠标放到选择城市菜单上弹出下一级城市菜单，点击当前城市菜单则选中，并且选择面板消失。 1、全局样式修改，找到App.js加入以下样式代码： /** *以下样式将单选框隐藏，并绝对定位与文字内容一样大小，这样点击时可以点击整行文字。 */ <style lang="scss"> .el-cascader-panel .el-radio { width: 132px; height: 34px; line-height: 34px; padding: 0
elementUI 级联选择器点击label文字部分选中及选中后收起菜单
weixin_58328414的博客
04-13 1944
elementUI的级联选择器，在单选选择任意一级选项模式下，必须点击选项中的圆圈才能选中该项，且选中后菜单不会自动收起，得点击下拉框以外的代码才能收起。在实际开发中为了考虑用户操作的简便性，想实现点击label文字内容可以直接选中该项，且选中后收起菜单。
vue element Cascader 级联选择器 选择任意一级选项 点击收起，点击label选中等问题详解
热门推荐
@必意玲
09-16 5万+
最近在做一个功能，要求级联选择器，选择每一级都可以，于是就先看下饿了么，找了半天发现好像没有这种，只有级联选择最后一级，然后这个又是返回的递归的数据，让我手写重新写一个属实有点浪费时间。 找了好久好久，实现找不到，问了下隔壁的前端老哥，他就来帮我找，也是找了好久没有找到，后面他看到我 element 版本是 2.0.11 然后把版本切换到最新版，我当时就傻逼了，我特么顿时感觉自己是哥沙雕，我收藏的...
element-ui的级联选择器的自动收缩功能
qq_42449028的博客
07-29 934
element-ui的级联选择器的自动收缩功能 先给el-cascader标签设置ref,然后使用this.$refs.cascader.dropDownVisible = false，只需要将属性dropDownVisible 设置为false，el-cascader即可自动收缩
elementUI cascader 选择后自动收起；单选不止点击小圈圈，点击文字也可以
cheng_chunxiao的博客
01-08 4300
<div id="app"> <div class="block"> <span class="demonstration">单选选择任意一级选项</span> <el-cascader ref="example" expand-trigger="hover" :options="options" :props="{ ch...
element-ui Cascader 级联选择器多级禁用
weixin_70955790的博客
11-02 1210
【代码】【无标题】element-ui Cascader 级联选择器多级禁用。
Element-ui Cascader 级联选择器回显数据
大漠孤烟
02-04 2478
回显的方式 两种情况： 1.直接使用JSON回显（针对于每个人看到的菜单一致，数据库直接保存数据JSON串，直接回显） 2.保存最后一位，递归回显 （针对于每个人看到的菜单不一样，有的人能看到两级，有的人能看到三级，只保存最后一位，然后前端做一下处理） 以下代码中的变量含义： resultJson：要回显的JSON串 navList：级联JSON数据（菜单父子结构数据） navIds：数据库保存的 2，3，4（需要回显的最后一位ID数组） 直接使用JSON回显 ，数据库保存数组JSON串，回显
element ui Cascader联级选择器 获取label的值
Bright2017的博客
05-27 287
主要用到官网的方法：getCheckedNodes <div class="address_management_two_two flex"> <span class="demonstration name_wid_left">省市区：</span> <el-cascader v-model="value" :options="options" ref="cascaderAddr" :props="{value:'v',label:'n',chi..
Element-UI中el-cascader级联选择器获取label值
Anorry的博客
03-25 3407
在el-cascader级联选择器中获取label值
Element cascader 级联选择器 点击文字选中
考拉很OK
09-08 1145
自从element-ui更新到2.12之后，级联选择器Cascader只能点击圆圈才能选中。点击文字 label 没有效果。用习惯了以前点击label直接选中后很不习惯新版本。
el-cascader级联选择器为文字绑定联动，实现点击文字即选中
一些简单的分享
05-30 2002
目前更新的版本中`el-cascader`组件不支持选择文字即选中的效果，我觉得可能是因为原先文字有切换、展开弹窗等事件，所以没有添加这个功能。 我们现在要实现这个功能也是简单，需要自己加上监听，或者自己重新封装组件也是可以的。
element联动选择器，选择任意层级点击文字即选中及点击就收缩效果
岁月如歌去，十年弹指间
01-05 1069
效果图 代码点击文字即选中 在mounted里加这句话 mounted() { // 点击文字即选中 this.timer = setInterval(function() { 　　　　　　document.querySelectorAll(".el-cascader-node__label").forEach(el => { 　　　　　　　　el.onclick = function() { 　　　　　　　　　　if (this.p...
ElementUI中Cascader级联选择器实现点击文本选中（单选多选均可）
y455974341的博客
09-20 7912
ElementUI中的Cascader 级联选择器，单选多选 点击文本选中
vue3 element-plus el-cascader 单选点击 只点击文字问题
lxyxfx的博客
06-12 416
vue3 element-plus
使用Element-UI中的el-cascader 实现可以任意选择一项，以及点击选中后下拉框自动收起
qp1101的博客
08-17 2535
使用Element-UI中的el-cascader 实现可以任意选择一项，以及点击选中后下拉框自动收起。
el-cascader级联选择，点击名字选中，并且关闭下拉框
qq_37167086的博客
09-25 2900
<el-cascader ref='ownArea' popper-class="selectArea" @change="selectArea" :options="formSelectData.office"> </el-cascader> 将radio的宽高填满，这样点击文字也...
element Select 选择器下拉框中添加按钮
HACKERRONGGE的博客
12-21 1万+
html： <el-select style="left: 15px" v-model="shipTemplateId" ref="template" @change="selectTemplate($event,templateType.ship)" @visible-change="v => visibleChange(v,'t
element el-cascader 级联选择器 怎么取消选中
最新发布
04-23
### 如何在 Element UI 的 `el-cascader` 中取消选中项 在使用 Element UI 的 `el-cascader` 组件时，如果需要清除已选中的值，可以通过绑定的 `v-model` 数据来实现。具体来说，将该数据设置为空数组即可完成清空...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值