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

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组件 思路&#xff1a; 选中节点时&#xff0c;给选中的节点赋值 pathLabel&#xff0c;pathLabel 为函数生成的节点名字拼接&#xff0c;数据源中不包含。 在el-tree-select组件中设置 props“{ label: ‘pathLabel’ }” 控制选中时input框中回…...

智能机巢+无人机:自动化巡检技术详解

智能机巢与无人机的结合&#xff0c;在自动化巡检领域展现出了巨大的潜力和优势。以下是对这一技术的详细解析&#xff1a; 一、智能机巢概述 智能机巢&#xff0c;也被称为无人机机场或无人机机巢&#xff0c;是专门为无人机提供停靠、充电、维护等服务的智能化设施。它不仅…...

摩托车加装车载手机充电usb方案/雅马哈USB充电方案开发

长途骑行需要给手机与行车记录仪等设备供电&#xff0c;那么&#xff0c;加装USB充电器就相继在两轮电动车上应用起来了。摩托车加装usb充电方案主要应用于汽车、电动自行车、摩托车、房车、渡轮、游艇等交通工具。提供电动车USB充电器方案/摩托车加装usb充电方案/渡轮加装usb充…...

进阶岛 任务3: LMDeploy 量化部署进阶实践

进阶岛 任务3&#xff1a; LMDeploy 量化部署进阶实践 任务&#xff1a;https://github.com/InternLM/Tutorial/blob/camp3/docs/L2/LMDeploy/task.md 使用结合W4A16量化与kv cache量化的internlm2_5-1_8b-chat模型封装本地API并与大模型进行一次对话&#xff0c;作业截图需包…...

vue 使用jszip,file-saver下载压缩包,自定义文件夹名,文件名打包下载为zip压缩包文件,全局封装公共方法使用。

记录一下后台管理全局封装一个压缩包下载方法&#xff0c;文件夹名自定义&#xff0c;文件名自定义&#xff0c;压缩包名自定义。 安装必要的库 npm install jszip npm install file-saver自定义一个公共方法全局注入 页面使用 /** 下载按钮操作 */handleDownload() {const i…...

计网八股文

1.HTTP和HTTPS的区别 安全性&#xff1a; HTTP&#xff1a;是未加密的协议&#xff0c;意味着数据在传输过程中可以被截获、篡改或监听。它不提供任何数据加密。HTTPS&#xff1a;在HTTP的基础上加入了SSL/TLS协议&#xff0c;提供了数据加密、完整性校验和身份验证。这使得传输…...

[001-03-007].第07节:Redis中的事务

我的后端学习大纲 我的Redis学习大纲 1、Redis事务是什么&#xff1a; 1.可以一次执行多个命令&#xff0c;本质是一组命令的集合。一个事务中的所有命令都会序列化&#xff0c; 按顺序地串行化执行而不会被其他命令插入&#xff0c;不许加塞2.一个队列中&#xff0c;一次性、…...

WLAN实验简述

一&#xff1a;配置生产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 是一个开源的应用容器引擎&#xff0c;它允许开发者将应用程序及其依赖项打包到一个可移植的容器中&#xff0c;然后发布到任何流行的 Linux 或 Windows 操作系统上。D…...

C:字符串函数(续)-学习笔记

穗 一些闲话&#xff1a; 最近玩了这款饿殍-明末千里行&#xff0c;不知大家是否有听过这款游戏&#xff0c;颇有感触&#xff01;&#xff01;&#xff01; 游戏中最让我难以忘怀的便是饿殍穗线的故事&#xff0c;生在如今时代的我之前无法理解杜甫在目睹人间悲剧时的心情&…...

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 时&#xff0c;如果没有进行更新&#xff0c;可能有以下几种原因&#xff1a; 1. 没有发布稳定版本 (vX.X.X) latest 表示获取该模块最新的稳定版本&#xff08;即带有 vX.X.X 形式的版本号&#xff09;&#xff0c;而不…...

介绍一些免费 的 html 5模版网站 和配色 网站

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、H5 网站介绍网站 二、配色网站个人推荐 前言 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、H5 网站介绍 以下是一些提供免费…...

【C++】入门基础(下)

Hi&#xff01;很高兴见到你~ 目录 7、引用 7.3 引用的使用&#xff08;实例&#xff09; 7.4 const引用 【第一分点】 【第二分点1】 【第二分点2】 7.5 指针和引用的关系&#xff08;面试点&#xff09; 8、inline 9、nullptr Relaxing Time&#xff01; ———…...

Spring Boot 集成 MongoDB - 入门指南

引言 随着NoSQL数据库的流行&#xff0c;MongoDB 成为了许多现代Web应用程序的首选数据库之一。它提供了高性能、高可用性和易于扩展的能力。Spring Boot 框架以其开箱即用的理念简化了Java应用程序的开发过程。本文将指导您如何在Spring Boot项目中集成MongoDB&#xff0c;以…...

基于云计算的虚拟电厂负荷预测

基于云计算的虚拟电厂负荷预测 随着电网规模的扩大及新能源的不断应用&#xff0c;并网电网的安全性和经济性备受关注。 电网调度不再是单一或局部控制&#xff0c;而是采用智能网络集成方式调度 。 智能电网应具有以下特点&#xff1a;坚强自愈&#xff0c;可以抵御外来干扰甚…...

Android应用性能优化

Android手机由于其本身的后台机制和硬件特点&#xff0c;性能上一直被诟病&#xff0c;所以软件开发者对软件本身的性能优化就显得尤为重要&#xff1b;本文将对Android开发过程中性能优化的各个方面做一个回顾与总结。 Cache优化 ListView缓存&#xff1a; ListView中有一个回…...

fiddler抓包01:工具介绍

课程大纲 fiddler是一款常见的抓包工具&#xff0c;可以对web端和移动端的接口请求进行抓包&#xff08;截获&#xff09;、分析、编辑、模拟等&#xff0c;还可以导出jmeter、Loadrunner测试脚本。 1、原理 fiddler作为代理服务器&#xff0c;拦截请求和服务器响应。 2、使用…...

Spring Boot母婴商城:打造一站式购物体验

1 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#xff0c;规范化管理。这样的大环境让那些止步不前&#…...

【面试八股总结】GC垃圾回收机制

垃圾回收策略&#xff08;Garbage Collection&#xff0c;GC&#xff09;用于回收不再使用的内存&#xff0c;避免系统的内存被占满。Go1.3之前采用标记清除法&#xff0c; Go1.3之后采用三色标记法&#xff0c;Go1.8采用三色标记法混合写屏障。 前置概念&#xff1a; 1&#x…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...