vue使用TreeSelect设置带所有父级节点的回显

Element Plus的el-tree-select组件
思路: 选中节点时,给选中的节点赋值 pathLabel,pathLabel 为函数生成的节点名字拼接,数据源中不包含。
在el-tree-select组件中设置 props=“{ label: ‘pathLabel’ }” 控制选中时input框中回显的字段。选择项的名称(option-label)使用插槽#default控制。
<template>
<div class="content"><el-tree-select filterable :data="deptData" :props="{ value: 'id', label: 'pathLabel', children: 'children' }"@change="handleDeptData" node-key="id"class="w100" clearable placeholder="请选择/输入分组"check-strictly :render-after-expand="true"v-model="deptIds"><template #default="{ data: { name } }"><span>{{ name }}</span></template></el-tree-select>
</div>
</template>
<script setup lang="ts">
const deptIds = ref('')
const deptData = ref([{id: 1100, name: '第一级', children: [{ id: 1101, name: '1-1' ,children: [{ id: 110101, name: '1-1-1' },{ id: 110102, name: '1-2-2' },{ id: 110103, name: '1-3-3' },] },{ id: 1102, name: '1-2' },{ id: 1103, name: '1-3' },]},{id: 1200, name: '第二级', children: [{ id: 1201, name: '2-1' },{ id: 1202, name: '2-2' },{ id: 1203, name: '2-3' },]},
])
const handleDeptData = (deptId: string) => {findPath(deptData.value, deptId);
}// 根据分组id获取分组名
function findPath(tree:any, targetId:string) {let path = [];let currentNode;// 查找节点function findNode(nodes, currentPath) {for (let node of nodes) {const newPath = [...currentPath, node.name];if (node.id === targetId) {currentNode = node;path = newPath;return true;}if (node.children && findNode(node.children, newPath)) {return true;}}return false;}findNode(tree, []);// 选中节点赋值 pathLabelif (currentNode) currentNode.pathLabel = path.length ? path.join('/') : null;return path.length ? path.join('/') : null;
}
</script>
相关文章:
vue使用TreeSelect设置带所有父级节点的回显
Element Plus的el-tree-select组件 思路: 选中节点时,给选中的节点赋值 pathLabel,pathLabel 为函数生成的节点名字拼接,数据源中不包含。 在el-tree-select组件中设置 props“{ label: ‘pathLabel’ }” 控制选中时input框中回…...
智能机巢+无人机:自动化巡检技术详解
智能机巢与无人机的结合,在自动化巡检领域展现出了巨大的潜力和优势。以下是对这一技术的详细解析: 一、智能机巢概述 智能机巢,也被称为无人机机场或无人机机巢,是专门为无人机提供停靠、充电、维护等服务的智能化设施。它不仅…...
摩托车加装车载手机充电usb方案/雅马哈USB充电方案开发
长途骑行需要给手机与行车记录仪等设备供电,那么,加装USB充电器就相继在两轮电动车上应用起来了。摩托车加装usb充电方案主要应用于汽车、电动自行车、摩托车、房车、渡轮、游艇等交通工具。提供电动车USB充电器方案/摩托车加装usb充电方案/渡轮加装usb充…...
进阶岛 任务3: LMDeploy 量化部署进阶实践
进阶岛 任务3: LMDeploy 量化部署进阶实践 任务:https://github.com/InternLM/Tutorial/blob/camp3/docs/L2/LMDeploy/task.md 使用结合W4A16量化与kv cache量化的internlm2_5-1_8b-chat模型封装本地API并与大模型进行一次对话,作业截图需包…...
vue 使用jszip,file-saver下载压缩包,自定义文件夹名,文件名打包下载为zip压缩包文件,全局封装公共方法使用。
记录一下后台管理全局封装一个压缩包下载方法,文件夹名自定义,文件名自定义,压缩包名自定义。 安装必要的库 npm install jszip npm install file-saver自定义一个公共方法全局注入 页面使用 /** 下载按钮操作 */handleDownload() {const i…...
计网八股文
1.HTTP和HTTPS的区别 安全性: HTTP:是未加密的协议,意味着数据在传输过程中可以被截获、篡改或监听。它不提供任何数据加密。HTTPS:在HTTP的基础上加入了SSL/TLS协议,提供了数据加密、完整性校验和身份验证。这使得传输…...
[001-03-007].第07节:Redis中的事务
我的后端学习大纲 我的Redis学习大纲 1、Redis事务是什么: 1.可以一次执行多个命令,本质是一组命令的集合。一个事务中的所有命令都会序列化, 按顺序地串行化执行而不会被其他命令插入,不许加塞2.一个队列中,一次性、…...
WLAN实验简述
一:配置生产AP1上级接入层交换机LSW3 sys [Huawei]sysname LSW3 [LSW3]undo info-center enable [LSW3]vlan batch 10 100 [LSW3]int g0/0/2 [LSW3-GigabitEthernet0/0/2]port link-type trunk [LSW3-GigabitEthernet0/0/2]port trunk allow-pass vlan 10 100 [LSW…...
Docker简介在Centos和Ubuntu环境下安装Docker
文章目录 1.Docker简介2.Docker镜像与容器3.安装Docker3.1 Centos环境3.2 Ubuntu环境 1.Docker简介 Docker 是一个开源的应用容器引擎,它允许开发者将应用程序及其依赖项打包到一个可移植的容器中,然后发布到任何流行的 Linux 或 Windows 操作系统上。D…...
C:字符串函数(续)-学习笔记
穗 一些闲话: 最近玩了这款饿殍-明末千里行,不知大家是否有听过这款游戏,颇有感触!!! 游戏中最让我难以忘怀的便是饿殍穗线的故事,生在如今时代的我之前无法理解杜甫在目睹人间悲剧时的心情&…...
Depth靶机详解
靶机下载地址 https://www.vulnhub.com/entry/depth-1,213/ 主机发现 arp-scan -l 端口扫描 nmap -sV -A -T4 192.168.229.156 端口利用 http://192.168.229.156:8080/ 目录扫描 dirb "http://192.168.229.156:8080" dirsearch -u "http://192.168.229.15…...
go get -u @latest没有更新依赖模块
使用 go get -u gitee.com/qingfeng-169/hello-blatest 时,如果没有进行更新,可能有以下几种原因: 1. 没有发布稳定版本 (vX.X.X) latest 表示获取该模块最新的稳定版本(即带有 vX.X.X 形式的版本号),而不…...
介绍一些免费 的 html 5模版网站 和配色 网站
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、H5 网站介绍网站 二、配色网站个人推荐 前言 提示:以下是本篇文章正文内容,下面案例可供参考 一、H5 网站介绍 以下是一些提供免费…...
【C++】入门基础(下)
Hi!很高兴见到你~ 目录 7、引用 7.3 引用的使用(实例) 7.4 const引用 【第一分点】 【第二分点1】 【第二分点2】 7.5 指针和引用的关系(面试点) 8、inline 9、nullptr Relaxing Time! ———…...
Spring Boot 集成 MongoDB - 入门指南
引言 随着NoSQL数据库的流行,MongoDB 成为了许多现代Web应用程序的首选数据库之一。它提供了高性能、高可用性和易于扩展的能力。Spring Boot 框架以其开箱即用的理念简化了Java应用程序的开发过程。本文将指导您如何在Spring Boot项目中集成MongoDB,以…...
基于云计算的虚拟电厂负荷预测
基于云计算的虚拟电厂负荷预测 随着电网规模的扩大及新能源的不断应用,并网电网的安全性和经济性备受关注。 电网调度不再是单一或局部控制,而是采用智能网络集成方式调度 。 智能电网应具有以下特点:坚强自愈,可以抵御外来干扰甚…...
Android应用性能优化
Android手机由于其本身的后台机制和硬件特点,性能上一直被诟病,所以软件开发者对软件本身的性能优化就显得尤为重要;本文将对Android开发过程中性能优化的各个方面做一个回顾与总结。 Cache优化 ListView缓存: ListView中有一个回…...
fiddler抓包01:工具介绍
课程大纲 fiddler是一款常见的抓包工具,可以对web端和移动端的接口请求进行抓包(截获)、分析、编辑、模拟等,还可以导出jmeter、Loadrunner测试脚本。 1、原理 fiddler作为代理服务器,拦截请求和服务器响应。 2、使用…...
Spring Boot母婴商城:打造一站式购物体验
1 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大,随着当前时代的信息化,科学化发展,让社会各行业领域都争相使用新的信息技术,对行业内的各种相关数据进行科学化,规范化管理。这样的大环境让那些止步不前&#…...
【面试八股总结】GC垃圾回收机制
垃圾回收策略(Garbage Collection,GC)用于回收不再使用的内存,避免系统的内存被占满。Go1.3之前采用标记清除法, Go1.3之后采用三色标记法,Go1.8采用三色标记法混合写屏障。 前置概念: 1&#x…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
Map相关知识
数据结构 二叉树 二叉树,顾名思义,每个节点最多有两个“叉”,也就是两个子节点,分别是左子 节点和右子节点。不过,二叉树并不要求每个节点都有两个子节点,有的节点只 有左子节点,有的节点只有…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
【Linux】Linux 系统默认的目录及作用说明
博主介绍:✌全网粉丝23W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
跨平台商品数据接口的标准化与规范化发展路径:淘宝京东拼多多的最新实践
在电商行业蓬勃发展的当下,多平台运营已成为众多商家的必然选择。然而,不同电商平台在商品数据接口方面存在差异,导致商家在跨平台运营时面临诸多挑战,如数据对接困难、运营效率低下、用户体验不一致等。跨平台商品数据接口的标准…...
游戏开发中常见的战斗数值英文缩写对照表
游戏开发中常见的战斗数值英文缩写对照表 基础属性(Basic Attributes) 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...
