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>

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

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

相关文章

如何使用ssm实现企业人事管理系统+vue

TOC ssm628企业人事管理系统vue 研究背景 自计算机发展以来给人们的生活带来了改变。第一代计算机为1946年美国设计&#xff0c;最开始用于复杂的科学计算&#xff0c;占地面积、开机时间要求都非常高&#xff0c;经过数十几的改变计算机技术才发展到今天。现如今已是电子时…

Holynix: v1

确认物理地址 00:0C:29:BC:05:DE ip扫描 arp-scan -l 端口扫描 nmap 192.168.48.167 访问一下80端口 burp抓包 找到一个登录框 想着burp抓包试试 将抓到的包放入kali中的文件中使用sqlmap注入试试 sqlmap 存在sql注入 sqlmap -r password --batch --random-agent 发现…

卷积神经网络经典模型架构简介

【图书推荐】《PyTorch深度学习与企业级项目实战》-CSDN博客 《PyTorch深度学习与企业级项目实战&#xff08;人工智能技术丛书&#xff09;》(宋立桓&#xff0c;宋立林)【摘要 书评 试读】- 京东图书 (jd.com) ImageNet是一个包含超过1 500万幅手工标记的高分辨率图像的数据…

Android Activity分屏设置

1.AndroidManifest.xml设置&#xff1a; android:configChanges"screenSize|smallestScreenSize|screenLayout" android:resizeableActivity"true" <activityandroid:name"com.xxx"android:exported"true"android:configChanges&…

极狐GitLab DevSecOps 功能合集(七大安全功能)

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门面向中国程序员和企业提供企业级一体化 DevOps 平台&#xff0c;用来帮助用户实现需求管理、源代码托管、CI/CD、安全合规&#xff0c;而且所有的操作都是在一个平台上进行&#xff0c;省事省心省钱。可以一键安装极狐GitL…

CAS 和 synchronized 的优化过程

&#x1f349; 目录 CAS 的实现 CAS 的工作原理 优化过程 CAS 的应用 1) 实现原子类 2&#xff09;实现自旋锁 CAS 的 ABA 问题 synchronized 的 原理 synchronized 基本特点 加锁工作过程 其他优化操作 1. 锁消除 2. 锁粗化 CAS&#xff08;Compare-And-Swap&…

2024ICPC网络赛第一场

A 最终答案与中国队能力值的排名有关&#xff0c;具体每个情况手推一下&#xff0c;用 if else 即可通过。 #include <bits/stdc.h> using namespace std;int main() {ios::sync_with_stdio(false); cin.tie(0);int t, a[40];cin >> t;while (t--) {int num 0;f…

SpringBoot 消息队列RabbitMQ 消费者确认机制 失败重试机制

介绍 为了确认消费者是否成功处理消息&#xff0c;RabbitMQ提供了消费者确认机制(ConsumerAcknowledgement)。当消费者处理消息结束后&#xff0c;应该向RabbitMQ发送一个回执&#xff0c;告知RabbitM0自己消息处理状态。 回执三种模式 ack:成功处理消息&#xff0c;RabbitM…

Arduino IDE离线配置第三方库文件-ESP32开发板

简洁版可以使用uget等&#xff0c;将文件下载到对应文件夹下&#xff0c;然后安装。 esp32之arduino配置下载提速 录屏 Arduino IDE离线配置第三方库文件ESP32 资源 Linux https://download.csdn.net/download/ZhangRelay/89749063 第三方开发板 非默认支持的开发板 linu…

Ubuntu24.04部署docker

1、更新软件 apt update 2、安装curl apt install apt-transport-https curl 3、导入阿里云GPG秘钥 curl -fsSL https://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg 4、添加Docker阿里云仓库到Ubuntu 24.04的…

Python编码系列—Python适配器模式:无缝集成的桥梁

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

LLM - 理解 多模态大语言模型 (MLLM) 的指令微调与相关技术 (四)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/142063880 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 完备(F…

如何看待IBM中国研发部裁员

如何看待IBM中国研发部裁员&#xff1f; 近日&#xff0c;IBM中国宣布撤出在华两大研发中心&#xff0c;引发了IT行业对于跨国公司在华研发战略的广泛讨论。这一决定不仅影响了众多IT从业者的职业发展&#xff0c;也让人思考全球化背景下中国IT产业的竞争力和未来发展方向。面对…

文件格式转换:EXCEL和CSV文件格式互相转换

目录 1.EXCEl和CSV文件格式互相转换1.1首先安装所需的Python包1.2excel转换为csv代码如下&#xff1a;1.3csv转换为excel代码如下&#xff1a; 由于excel文件在数学建模数据处理当中的局限性&#xff0c;我们通常把excel文件转换为csv文件来处理&#xff0c;下面是相关的代码&a…

P1439 【模板】最长公共子序列 (线性DP,LCS + LIS)

【模板】最长公共子序列 题目描述 给出 1 , 2 , … , n 1,2,\ldots,n 1,2,…,n 的两个排列 P 1 P_1 P1​ 和 P 2 P_2 P2​ &#xff0c;求它们的最长公共子序列。 输入格式 第一行是一个数 n n n。 接下来两行&#xff0c;每行为 n n n 个数&#xff0c;为自然数 1 …

Java算法总结

文章目录 一、链表相关1.1 从尾到头打印单链表[要求 方式1&#xff1a;反向遍历。方式2&#xff1a;Stack栈]1.2 josephu问题&#xff08;使用带尾指针的循环链表&#xff09; 二、动态规划2.1 斐波那契数列 2022.4.182.2 青蛙上台阶 2022.4.18 三、位运算符3.1 二进制中1的个数…

统信服务器操作系统【d版字符系统升级到dde图形化】配置方法

统信服务器操作系统d版本上由字符系统升级到 dde 桌面系统的过程 文章目录 一、准备环境二、功能描述安装步骤1. lightdm 安装2. dde 安装 一、准备环境 适用版本&#xff1a;■UOS服务器操作系统d版 适用架构&#xff1a;■ARM64、AMD64、MIPS64 网络&#xff1a;连接互联网…

几种修改docker默认存储位置的方法

需求 docker容器存放目录磁盘空间满了&#xff0c;需要转移数据&#xff0c;修改Docker默认存储位置 解决方法 方法&#xff11;&#xff1a;迁移到新目录 停止docker服务。 1systemctl stop docker; //每个liunx版本的命令不一样。创建新的docker目录&#xff0c;执行命令df…

为了有了ReentrantLock还需要ReentrantReadWriteLock?

ReentrantLock 和 ReentrantReadWriteLock 是 Java 中的两种不同实现的锁&#xff0c;它们各自适用于不同的应用场景。以下是为什么需要 ReentrantReadWriteLock 的几个原因&#xff1a; 1. 读写分离 ReentrantLock 是一种独占锁&#xff0c;适用于任何线程操作共享资源的场景…

kettle 数据库迁移 使用分页原理实现 数据库mysql

使用 kettle 9.0 先修改配置文件: C:\Users\xx\.kettle 新增如下配置,解决mysql 空字符串 自动转 null bug KETTLE_EMPTY_STRING_DIFFERS_FROM_NULLY git地址: GitHub - 2292011451/kettle_tool 第一步: 先把要迁移的表进行读取,循环查询每个表的最大数量以及页数,追加到…