当前位置: 首页 > news >正文

vue3 element plus获取el-cascader级联选择器选中的当前结点的label值 附vue2获取当前label

各位大佬,有时我们在处理级联选择组件数据时,不仅需要拿到id,还需要拿到label名称,但是通常组件直接绑定的是id,所以就需要我们用别的方法去拿到label,此处官方是有这个方法的,具体根据不同的element 版本进行分别处理。

VUE3 + element3.x版本处理办法

主要分为3个步骤,
1、template部分增加ref名称和change事件;
2、获取ref
3、change事件直接获取label名称并赋值

1、template部分
<el-form-item :label="asides['articleOrg'].name ?? $t('article.articleOrg')" required><el-cascader v-model="values.articleOrg" :options="orgList" ref="articleOrgRef" @change="handleChange"class="w-full" :props="props1" clearable /></el-form-item>// 只需要在你的代码上给级联组件增加ref名称即可,随意起的,您怎么开心怎么来哈哈
2、获取Ref
import { ref } from 'vue';
const articleOrgRef = ref(null)
3、change事件直接获取label名称并赋值
const handleChange = ()=> {console.log("label====",articleOrgRef.value.getCheckedNodes()[0].label)// 我这里只是打印了一下label的值哦,需要赋值的话自己去赋值哦
}

VUE2 + element2.x

获取el-cascader级联选择器选中的当前结点的label值,此处引用大佬的文章,可以去看下
获取el-cascader级联选择器选中的当前结点的label值

http://www.lryc.cn/news/170378.html

相关文章:

  • Spring Boot常见面试题
  • 分块矩阵求逆
  • Python 文件写入操作
  • 【Spring Boot系列】- Spring Boot侦听器Listener
  • JavaScript速成课—事件处理
  • 【入门篇】ClickHouse最优秀的开源列式存储数据库
  • 【C++ Exceptions】异常处理的成本
  • API接口:原理、实现及应用
  • SpringBoot学习笔记(项目创建,yaml,多环境开发,整合mybatis SMM)
  • Linux内核分析:输入输出,字符与块设备 31-35
  • Linux抓包工具tcpdump
  • Qt消息机制和事件
  • LeetCode-739-每日温度-单调栈
  • MyBatis中当实体类中的属性名和表中的字段名不一样,怎么办
  • Flutter框架和原理剖析
  • NFS:使用 Ansible 自动化配置 NFS 客户端服务端
  • IntelliJ IDEA使用——Debug操作
  • uniapp项目实践总结(十八)自定义多列瀑布流组件
  • Ubuntu 22.04LTS + 深度学习环境安装全流程
  • 【lesson7】git的介绍及使用
  • Keepalived+LVS高可用集群
  • AK 9.12 百度Java后端研发B卷 笔试
  • 使用Python和XPath解析动态JSON数据
  • 记录一个iOS实现视频分片缓存拖拽快进不能播放的问题
  • 如何解决 503 Service Temporarily Unavailable?
  • keil报错:Flash Download failed - Could not load file‘..\..\Output\Template.axf
  • 从一到无穷大 #16 ByteSeries,思考内存时序数据库的必要性
  • 分支和远程仓库
  • 编译原理 —— 编译器
  • Python灰帽编程——错误异常处理与面向对象