el-cascader级联选择器那些事

news2024/11/22 12:42:44

el-cascader级联选择器那些事

  • 1、获取选中的节点及其所有上级

vue3+element-plus+ts

1、获取选中的节点及其所有上级

使用cascader组件提供的getCheckedNodes()
在这里插入图片描述在这里插入图片描述

<el-cascader :options="options" :show-all-levels="false" @change="changeCascader" ref="cascader" />

const cascader = ref();

const options = [
	{
		value: 'fu1',
		label: '父1',
		type: '父type1',
		children: [
			{
				value: 'zi1',
				label: '子1',
				type: '子type1',
				children: [
					{
						value: 'sun1',
						label: '孙1',
						type: '孙type1',
					},
					{
						value: 'sun2',
						label: '孙2',
						type: '孙type2',
					},
				],
			},
			{
				value: 'zi2',
				label: '子2',
				type: '子type2',
			},
		],
	},
	{
		value: 'fu2',
		label: '父2',
		type: '父type2',
	},
];

const changeCascader = () => {
	let nodesInfo = cascader.value.getCheckedNodes();
	console.log(nodesInfo);
	//赋值
	form.storeId = nodesInfo[0].parent.data.value;
	form.storeName = nodesInfo[0].parent.data.label;
	form.spaceId = nodesInfo[0].data.value;
	form.spaceName = nodesInfo[0].data.label;
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/761357.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

cocosCreator笔记 之Spine了解

版本&#xff1a; 3.4.0 参考&#xff1a; Spine 骨骼动画资源 Spine Skeleton组件 cocosLua 之 骨骼动画 简介 使用spine动画&#xff0c;cocosCreator目前支持的版本&#xff1a; creator版本spine版本V3.0 及以上v3.8&#xff08;原生平台不支持特定版本 v3.8.75&…

北京银行发放门头沟区首笔知识产权质押贷款

6月&#xff0c;位于北京中关村门头沟科技园、专注于研制工业母机的民营企业——北京精雕科技集团有限公司&#xff08;以下简称“精雕科技集团”&#xff09;&#xff0c;因生产经营急需资金&#xff0c;但是由于缺乏抵押物而陷入了融资困境。“精雕科技集团与北京银行合作已长…

java习题3

292. Nim 游戏 难度简单 你和你的朋友&#xff0c;两个人一起玩 Nim 游戏&#xff1a; 桌子上有一堆石头。你们轮流进行自己的回合&#xff0c; 你作为先手 。每一回合&#xff0c;轮到的人拿掉 1 - 3 块石头。拿掉最后一块石头的人就是获胜者。 假设你们每一步都是最优解。…

Slf4j日志集成

Slf4j日志集成 下面就是集成步骤&#xff0c;按着做就可以了 1、logback-spring.xml 哪个服务需要记录日志就将在哪个服务的resource下新建logback-spring.xml文件&#xff0c;里面的内容如下&#xff1a; <!-- 级别从高到低 OFF 、 FATAL 、 ERROR 、 WARN 、 INFO 、 …

微软宣布Win10准备热烈的迎接Docker

在DockerCon 2017大会上&#xff0c;Docker团队今天宣布了LinuxKit&#xff0c;这是一个安全、干净和便携式的Linux子系统container容器环境。LinuxKit允许工具构建自定义的Linux子系统&#xff0c;可以仅包含完全运行时平台的组件需要。所有的系统服务都是可替换的容器&#x…

Leetcode-每日一题【25.k个一组翻转链表】

题目 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节点内…

xml2json xml转换成json PHP phpstorm

phpstorm 的插件 xml2json快速实现 xml转换成json 1&#xff0c;先安装好Phpstorm 2 二、好用的插件 进入设置页面&#xff0c;快捷键CtrlAlts&#xff0c;或者Files->settings 作者是meizu &#xff0c;应该是魅族公司&#xff0c;贡献的插件

【C语言进阶技巧】探秘字符与字符串函数的奇妙世界

【C语言进阶技巧】探秘字符与字符串函数的奇妙世界 1. strlen函数1.1 strlen函数的使用介绍1.2 strlen函数的模拟实现1.2.1 计数法&#xff08;使用临时变量&#xff09;1.2.1 递归法&#xff08;不使用临时变量&#xff09;1.2.3 指针减指针的方法 2. strcpy函数2.1 strcpy函数…

rust

文章目录 rustCargoCreating a rust project How to Debug Rust Programs using VSCodebasic debuggingHow to pass arguments in Rust debugging with VS Code. References rust Cargo Cargo is a package management tool used for downloading, compiling, updating, and …

Linux---gdb

Linux调试器-gdb使用 GDB&#xff08;GNU调试器&#xff09;是一个在多种操作系统&#xff08;包括Linux&#xff09;上使用的功能强大的调试器。它允许开发者对程序进行调试&#xff0c;以便找出程序中的错误、理解程序的执行过程和进行性能分析。 程序的发布有两种&#xf…

想要学习编程,有什么推荐的书籍吗?

编程是以计算机程序的形式创建创新解决方案的艺术&#xff0c;用于解决各个领域不同的问题&#xff0c;从经典的数学难题和日常生活问题到天气预报以及寻找和理解宇宙中的新奇观。 尽管编程和编码通常可以互换使用&#xff0c;但编程不仅仅是编码。编码代表编程的这一部分&…

mysql数据库 索引

目录 1.定义 2.作用 3.索引使用场景 4.索引分类 5.案例 普通索引 唯一索引 主键索引 组合索引 全文索引 删除索引 1.定义 索引是一个排序的列表 在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址 ### 可以当作目录 2.作用 方便定位信息 做…

我终于成功登上了JS 框架榜单,并且仅落后于 React 4 名!

前言 如期而至&#xff0c;我独立开发的 JavaScript 框架 Strve.js 迎来了一个大版本5.6.2。此次版本距离上次大版本发布已经接近半年之多&#xff0c;为什么这么长时间没有发布新的大版本呢&#xff1f;主要是研究 Strve.js 如何支持单文件组件&#xff0c;使代码智能提示、代…

[洛谷]P8662 [蓝桥杯 2018 省 AB] 全球变暖(dfs)

读题不规范&#xff0c;做题两年半&#xff01; 注意&#xff1a;被海水淹没后的陆地应用另一个字符表示&#xff0c;而不是把它变为海洋&#xff0c;这个点可以便利&#xff0c;但不能被当作起点&#xff0c;不然就只有 36 分。 ACocde: #include<bits/stdc.h> using…

nodejs 下载地址 阿里云开源镜像站

nodejs 下载地址 阿里云开源镜像站 https://mirrors.aliyun.com/nodejs-release/ 我们下期见&#xff0c;拜拜&#xff01;

STM32(HAL库)通过ADC读取MQ2数据

目录 1、简介 2、CubeMX初始化配置 2.1 基础配置 2.1.1 SYS配置 2.1.2 RCC配置 2.2 ADC外设配置 2.3 串口外设配置 2.4 项目生成 3、KEIL端程序整合 3.1 串口重映射 3.2 ADC数据采集 3.3 主函数代 3.4 效果展示 1、简介 本文通过STM32F103C8T6单片机通过HAL库方式对M…

【java】JMeter进行web测试

JMeter进行web测试 1.对网页进行负载测试新建线程组添加默认 HTTP 请求属性添加cookie支持添加HTTP请求添加监听器以便于查看结果登录网站 2. 测试本地web项目3. 其他使用 URL 重写处理用户会话使用标题管理器 参考JMeter用户手册 https://jmeter.net/usermanual/build-web-te…

PC与(VMware)linux的IP互通

一、环境 二、NAT模式 NAT&#xff08;Network Address Translation&#xff09;网络地址转换&#xff0c;允许一个整体机构以一个公用IP地址出现在Internet上&#xff0c;即把内部私有网络地址翻译成合法网络IP地址的技术。家用路由器一般都是NAT模式。让虚拟系统借助NAT&…

14、vivado打不开工程源码

卡在Initializing Language Server. 解决办法&#xff1a;下图&#xff0c;然后重启软件

微软开源了一个 助力开发LLM 加持的应用的 工具包 semantic-kernel

在首席执行官萨蒂亚纳德拉&#xff08;Satya Nadella&#xff09;的支持下&#xff0c;微软似乎正在迅速转变为一家以人工智能为中心的公司。最近微软的众多产品线都采用GPT-4加持&#xff0c;从Microsoft 365等商业产品到“新必应”搜索引擎&#xff0c;再到低代码/无代码Powe…