当前位置: 首页 > 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值

相关文章:

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

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

Spring Boot常见面试题

Spring Boot简介 Spring Boot 是由 Pivotal 团队提供&#xff0c;用来简化 Spring 应用创建、开发、部署的框架。它提供了丰富的Spring模块化支持&#xff0c;可以帮助开发者更轻松快捷地构建出企业级应用。Spring Boot通过自动配置功能&#xff0c;降低了复杂性&#xff0c;同…...

分块矩阵求逆

另可参考Block matrix on Wikipedia2018.4.3 补充补充两个参考文献&#xff0c;都是对工科很实用的矩阵手册&#xff1a;D. S. Bernstein, Matrix mathematics: Theory, facts, and formulas with application to linear systems theory. Princeton, NJ: Princeton University …...

Python 文件写入操作

视频版教程 Python3零基础7天入门实战视频教程 w模式是写入&#xff0c;通过write方法写入内容。 # 打开文件 模式w写入&#xff0c;文件不存在&#xff0c;则自动创建 f open("D:/测试3.txt", "w", encoding"UTF-8")# write写入操作 内容写入…...

【Spring Boot系列】- Spring Boot侦听器Listener

【Spring Boot系列】- Spring Boot侦听器Listener 文章目录 【Spring Boot系列】- Spring Boot侦听器Listener一、概述二、监听器Listener分类2.1 监听ServletContext的事件监听器2.2 监听HttpSeesion的事件监听器2.3 监听ServletRequest的事件监听器 三、SpringMVC中的监听器3…...

JavaScript速成课—事件处理

目录 一.事件类型 1.窗口事件 2.表单元素事件 3.图像事件 4.键盘事件 5.鼠标事件 二.JavaScript事件处理的基本机制 三.绑定事件的方法 1.DOM元素绑定 2.JavaScript代码绑定事件 3.监听事件函数绑定 四.JavaScript事件的event对象 1.获取event对象 2.鼠标坐标获取…...

【入门篇】ClickHouse最优秀的开源列式存储数据库

文章目录 一、什么是ClickHouse&#xff1f;OLAP场景的关键特征列式数据库更适合OLAP场景的原因输入/输出CPU 1.1 ClickHouse的定义与发展历程1.2 ClickHouse的版本介绍 二、ClickHouse的主要特性2.1 高性能的列式存储2.2 实时的分析查询2.3 高度可扩展性2.4 数据压缩2.5 SQL支…...

【C++ Exceptions】异常处理的成本

最低成本 exception是C的一部分&#xff0c;编译器必须支持。即使从未使用任何异常处理机制&#xff0c;也必须付出一些空间放置某些数据结构&#xff0c;付出一些时间随时保持那些数据结构的正确性。 第二种成本&#xff1a;来自try语句块 避免非必要的try语句块。 粗略估计&a…...

API接口:原理、实现及应用

API&#xff08;Application Programming Interface&#xff09;接口是现代软件开发中不可或缺的一部分。它们提供了一种机制&#xff0c;使得不同的应用程序和服务可以相互通信&#xff0c;共享数据和功能。在这篇文章中&#xff0c;我们将探讨API接口的原理、实现及应用&…...

SpringBoot学习笔记(项目创建,yaml,多环境开发,整合mybatis SMM)

一、SpringBoot入门 1.1 SpringBoot概述 SpringBoot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化Spring应用的初始搭建以及开发过程。 Spring程序缺点&#xff1a;配置繁琐&#xff0c;依赖设置繁琐。SpringBoot程序优点&#xff1a;自动装配&#xff0c…...

Linux内核分析:输入输出,字符与块设备 31-35

CPU 并不直接和设备打交道,它们中间有一个叫作设备控制器(Device Control Unit)的组件,例如硬盘有磁盘控制器、USB 有 USB 控制器、显示器有视频控制器等。这些控制器就像代理商一样,它们知道如何应对硬盘、鼠标、键盘、显示器的行为。 输入输出设备我们大致可以分为两类…...

Linux抓包工具tcpdump

一、介绍 tcpdump是一个抓包工具&#xff0c;用于实时捕获和分析网络流量。它通常在unix和linux操作系统上使用。tcpdump能够捕获流经网络接口的数据包&#xff0c;并显示或保存它们以供进一步分析。它提供有关每个数据包的详细信息&#xff0c;包括源IP地址、目标IP地址、使用…...

Qt消息机制和事件

事件 事件是由Qt或者系统在不同时刻发出的,当敲下鼠标,或者按下键盘,或者当窗口需要重新绘制的时候,就会发出一个相应的事件,一些操作由用户的操作发出,一些则由系统自动发出,如系统定时器事件等。 Qt 中所有事件类都继承于 QEvent。 在事件对象创建完毕后, Qt 将这个…...

LeetCode-739-每日温度-单调栈

题目描述&#xff1a;给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在该位置用 0 来代替。 题目…...

MyBatis中当实体类中的属性名和表中的字段名不一样,怎么办

方法1&#xff1a; 在mybatis核心配置文件中指定&#xff0c;springboot加载mybatis核心配置文件 springboot项目的一个特点就是0配置&#xff0c;本来就省掉了mybatis的核心配置文件&#xff0c;现在又加回去算什么事&#xff0c;总之这种方式可行但没人这样用 具体操作&…...

Flutter框架和原理剖析

Flutter是Google推出并开源的跨平台开发框架&#xff0c;主打跨平台、高保真、高性能。开发者可以通过Dart语言开发Flutter应用&#xff0c;一套代码同时运行在ios和Android平台。不仅如此&#xff0c;flutter还支持web、桌面、嵌入应用的开发。flutter提供了丰富的组件、接口&…...

NFS:使用 Ansible 自动化配置 NFS 客户端服务端

考试顺便整理博文内容整理涉及使用 Ansible 部署 NFS 客户端和服务端理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在心中坚守其一生&#xff0c;全心全意&#xff0c;永不停息。所有其它的路都是不完整的&#xff0c;是人的逃…...

IntelliJ IDEA使用——Debug操作

文章目录 版本说明图标和快捷键查看变量计算表达式条件断点多线程调试 版本说明 当前的IntelliJ IDEA 的版本是2021.2.2&#xff08;下载IntelliJ IDEA&#xff09; ps&#xff1a;不同版本一些图标和设置位置可能会存在差异&#xff0c;但应该大部分都差不多。 图标和快捷键…...

uniapp项目实践总结(十八)自定义多列瀑布流组件

导语&#xff1a;有时候展示图片等内容&#xff0c;会遇到图片高度不一致的情况&#xff0c;这时候就不能使用等高双列或多列展示了&#xff0c;这时候会用到瀑布流的页面布局&#xff0c;下面就一起探讨一下瀑布流的实现方法。 目录 准备工作原理分析实战演练案例展示 准备工…...

Ubuntu 22.04LTS + 深度学习环境安装全流程

一、 CUDA Toolkit 安装 1. 选择需要安装的版本(下载地址) 2. 选择自己的系统版本获取下载地址和安装指令 3. 运行安装指令进行安装 wget https://developer.download.nvidia.com/compute/cuda/12.2.2/local_installers/cuda_12.2.2_535.104.05_linux.run sudo sh cuda_12.2.…...

【lesson7】git的介绍及使用

文章目录 什么是gitgit的历史git使用在gitee上创建仓库git clone HTTPS地址git add .git add 文件名git commit “日志”git pushgit loggit rm 文件名git statusgit pull 什么是git git是版本控制器&#xff0c;那么什么是版本控制器呢&#xff1f; 下面讲个故事为大家讲解一…...

Keepalived+LVS高可用集群

目录 一、keepalived介绍&#xff1a; 二、keepalived工具介绍&#xff1a; &#xff08;1&#xff09;管理 LVS 负载均衡软件&#xff1a; &#xff08;2&#xff09;支持故障自动切换&#xff1a; &#xff08;3&#xff09;实现 LVS 负载调度器、节点服务器的高可用性&…...

AK 9.12 百度Java后端研发B卷 笔试

T1(博弈论) #include <bits/stdc.h>#define endl \nusing namespace std;typedef long long LL;const int N 1e5 10;int n, m, t;void solve() {cin >> n >> m; t n m - 2;if(t & 1) cout << "Yes" << endl;else cout <&l…...

使用Python和XPath解析动态JSON数据

JSON动态数据在Python中扮演着重要的角色&#xff0c;为开发者提供了处理实时和灵活数据的能力。Python作为一种强大的编程语言&#xff0c;提供了丰富的工具和库来处理动态JSON数据使得解析和处理动态JSON数据变得简单和高效。例如&#xff0c;使用内置的json模块&#xff0c;…...

记录一个iOS实现视频分片缓存拖拽快进不能播放的问题

代码现状 首先来看一下我们将视频数据塞给请求的代码 - (void)finishLoadingWithLoadingRequest:(IdiotResourceTask *)task {// printf("哈哈执行到这里执行到到这里\n");printf("哈哈哈数量数量%ld\n", self.taskList.count);//填充信息task.loadingRe…...

如何解决 503 Service Temporarily Unavailable?

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…...

keil报错:Flash Download failed - Could not load file‘..\..\Output\Template.axf

keil报错&#xff1a;Flash Download failed - Could not load file’…\Output\Template.axf&#xff0c;如下图所示&#xff1a; 原因是很多.h文件没有定义位置&#xff0c;可以按照下图操作&#xff1a; 而且&#xff0c;如果是想使用压缩包&#xff0c;那一定要关闭keil后…...

从一到无穷大 #16 ByteSeries,思考内存时序数据库的必要性

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)&#xff0c;由 李兆龙 确认&#xff0c;转载请注明版权。 引言 在[3]中我基于Gorilla讨论了时序数据库设置cache的可行性&#xff0c;最后得出结论&…...

分支和远程仓库

分支 查看分支 git branch -v 创建分支 git branch 分支名 切换分支 git checkout 分支名 合并分支 git merge 分支名 把指定的分支合并到当前分支上 查看当前所有远程地址别名&#xff1a; git remote -v 起别名&#xff1a; git remote add 别名 远程地址推送本地分支上的…...

编译原理 —— 编译器

文章目录 编译原理阶段词法分析器语法分析器语义分析器中间代码生成器代码优化器代码生成器 编译原理阶段 编译器分为9个阶段来将我们所编写的高级代码编译为计算机可执行的机器码 源程序词法分析器语法分析器语义分析器中间代码生成器独立于机器的代码优化器代码生成器依赖于…...

腾讯云建设个人网站/关键词你们懂的

定义 无偏估计&#xff1a;估计量的均值等于真实值&#xff0c;即具体每一次估计值可能大于真实值&#xff0c;也可能小于真实值&#xff0c;而不能总是大于或小于真实值&#xff08;这就产生了系统误差&#xff09;。 估计量评价的标准 &#xff08;1&#xff09;无偏性 如上述…...

公司网站制作策划/seo赚钱培训

访问修饰符 修饰符 返回值类型 方法名(参数列表){   语句块;} 访问修饰符&#xff1a;所有类成员访问修饰符都可以使用&#xff0c;如果省略访问修饰符&#xff0c;默认是private。 修饰符&#xff1a;在定义方法时修饰符包括virtual(虚拟的)、abstract(抽象的)、override(重…...

如何制作网站后台/b站推广入口2023破解版

npm install laravel-echo-server -g安装了之后在其他目录无法执行&#xff0c;找不到命令&#xff0c;在windows下可以直接使用&#xff0c;在linux下需要配置下环境变量 npm prefix -g 该命令可以看到node全局环境的目录在哪里 将node环境中bin目录中的生成的 laravel-echo-…...

如何修改网站logo/百度推广做二级域名

每天花1-2个小时左右来学习就够了。 PMP考试其实说难也不难&#xff0c;说容易也不简单&#xff0c;但只要你是认真的在学&#xff0c;基本上都能过。主要还是看上课的老师讲课、是否专业&#xff0c;这些方面。 今天就跟大家讲讲一个完全不了解PMP的人要怎样去准备PMP考试&a…...

汕头市门户网站建设/关键词查询工具有哪些

netstat -ntpl kill -9 PID...

济南网站排名推广/企业营销

前言&#xff1a; 在前两篇的文章中&#xff0c;我们学会了给组件添加属性、事件&#xff0c;以及对这些属性和事件进行描述添加&#xff0c;今天&#xff0c;我们就来小试一把这个组件吧&#xff0c;如果你忘记了前两篇文章的内容&#xff0c;可以从这里回顾一下&#xff1a; …...