通过el-tree自定义渲染网页版工作目录,实现鼠标悬浮显示完整名称、用icon区分文件和文件夹等需求
目录
一、通过el-tree自定义渲染网页版工作目录
1.1、需求介绍
1.2、使用el-tree生成文档目录
1.2.1、官方基础用法
①效果
②代码:
1.2.2、自定义文档目录(实现鼠标悬浮显示完整名称、用icon区分文件和文件夹)
①效果(直接效果-左、鼠标悬浮显示完整名称的效果-右):
②template代码
③javascript代码
二、总结
一、通过el-tree自定义渲染网页版工作目录
1.1、需求介绍
最近做项目时需要做一些云原生相关的内容,有个需求要在服务器上做临时文件夹作为工作目录,同时要将工作目录映射到docker image中和前端页面上。那么将服务器的本地工作目录渲染到前端页面上是必须要实现的部分,其中从后端API获取本地目录信息后,将数据渲染成自定义的前端工作目录是篇博客将要谈到的主要内容。
本篇博客不讲docker、不讲云原生,想要了解这方面知识的请关注我的其他博客,不了解这些知识的不影响阅读本文。
本文会从前端渲染页面开始,还有一篇博客去讲如何设计后端API读取本地目录,获取文件信息和文件系统层级数据。
传送门:Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现-CSDN博客
1.2、使用el-tree生成文档目录
1.2.1、官方基础用法
官方文档传送门:Tree 树形控件 | Element Plus
这里就简单提一下,具体的可以在官方文档里面看看,最基础的直接导入就行。
①效果

②代码:
<template><el-treestyle="max-width: 600px":data="data":props="defaultProps"@node-click="handleNodeClick"/>
</template><script lang="ts" setup>
interface Tree {label: stringchildren?: Tree[]
}const handleNodeClick = (data: Tree) => {console.log(data)
}const data: Tree[] = [{label: 'Level one 1',children: [{label: 'Level two 1-1',children: [{label: 'Level three 1-1-1',},],},],},{label: 'Level one 2',children: [{label: 'Level two 2-1',children: [{label: 'Level three 2-1-1',},],},{label: 'Level two 2-2',children: [{label: 'Level three 2-2-1',},],},],},{label: 'Level one 3',children: [{label: 'Level two 3-1',children: [{label: 'Level three 3-1-1',},],},{label: 'Level two 3-2',children: [{label: 'Level three 3-2-1',},],},],},
]const defaultProps = {children: 'children',label: 'label',
}
</script>
1.2.2、自定义文档目录(实现鼠标悬浮显示完整名称、用icon区分文件和文件夹)
官方提供的基础版本侧重于多种类型,但忽视每种类型的普适性,这其实就是让我们自己设计满足具体情况的文档目录样式,官方只提供不同类型的用法。
自定义设计就是经典套路了,插槽该出场了。
数据请参考(其中有完整的数据结构和内容):Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现-CSDN博客
①效果(直接效果-左、鼠标悬浮显示完整名称的效果-右):


②template代码
其中el-icon有个v-if判断,确定是文件夹就添加文件夹的图标,否则就是文件图标,这里有具体的需求可以写的更加丰富些。el-tooltip是用来悬浮鼠标的时候提供完整名称的。
<el-tree:data="treeData":props="defaultProps"@node-click="handleNodeClick"><template #default="{ node, data }"><el-icon v-if="data.children && data.children.length > 0"><Folder/></el-icon><el-icon v-else><Tickets /></el-icon><el-tooltipclass="item"effect="light":content="data.label"placement="top-start"><span>{{ node.label }}</span></el-tooltip></template></el-tree>
③javascript代码
其中getDirectory是从后端获取数据的API,后端数据请参考另一篇博客,treeData是提供的测试数据,如果还没有后端数据可以先用这个数据做测试。
import {Upload,FolderChecked,SetUp,Edit,Box,ShoppingTrolley,
} from "@element-plus/icons-vue";
import { Ref, onMounted, ref } from "vue";/*** area-left* 左侧工作目录所需要包含的代码*/// 树形控件所需要的数据及对应设置
// 树形控件所需要的数据及对应设置
// 树形控件所需要的数据及对应设置
interface Tree {label: string;children?: Tree[];
}// const treeData: Tree[] = [
// {
// label: "Level one 1",
// children: [
// {
// label: "Level two 1-1",
// children: [
// {
// label: "Level three 1-1-1",
// },
// ],
// },
// ],
// },
// {
// label: "Level one 2",
// children: [
// {
// label: "Level two 2-1",
// children: [
// {
// label: "Level three 2-1-1",
// },
// ],
// },
// {
// label: "Level two 2-2",
// children: [
// {
// label: "Level three 2-2-1",
// },
// ],
// },
// ],
// },
// {
// label: "Level one 3",
// children: [
// {
// label: "Level two 3-1",
// children: [
// {
// label: "Level three 3-1-1",
// },
// ],
// },
// {
// label: "Level two 3-2",
// children: [
// {
// label: "Level three 3-2-1",
// },
// ],
// },
// ],
// },
// ];const defaultProps = {children: "children",label: "label",
};const nodeSelected = ref();
// 点击节点触发的事件
const handleNodeClick = (data: Tree) => {nodeSelected.value = data;// console.log(nodeSelected.value);
};const treeData: Ref<Tree[]> = ref([] as Tree[]);// 从后端获取和格式化工作目录的方法
const getAndFormatDirectory = async () => {const response = await getDirectory();treeData.value = formatDirectory(response);
};// 格式化后端工作目录的方法
const formatDirectory = (data: any, n = []) => {return data.map((item: any) => {// 这里n和newArr都是为了将文件的层级以及在哪些文件夹目录下保留下来,方便读取和编辑if (item.directory == true) {var newArr: any = [...n];// newArr[0] += 1;newArr.push(item.name);}return {label: item.name,children: item.children ? formatDirectory(item.children, newArr) : [],generation: n,};});
};// 加载页面时,先读取一次工作目录
onMounted(async () => {getAndFormatDirectory();
});
至此,就完成了对el-tree显示效果的自定义,这里我的需求比较轻量,写的就比较简洁,如果有更复杂详细的需求也是用这样的方法,只是多写一些代码而已。
二、总结
el-tree用来做前端的文档目录还是挺好用的,尤其是自带的node-click事件,真的给后续功能的实现提供了很多帮助,其他的事件方法也很全面,用起来还是很舒服的。
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
相关文章:
通过el-tree自定义渲染网页版工作目录,实现鼠标悬浮显示完整名称、用icon区分文件和文件夹等需求
目录 一、通过el-tree自定义渲染网页版工作目录 1.1、需求介绍 1.2、使用el-tree生成文档目录 1.2.1、官方基础用法 ①效果 ②代码: 1.2.2、自定义文档目录(实现鼠标悬浮显示完整名称、用icon区分文件和文件夹) ①效果(直接效…...
C语言 | Leetcode C语言题解之第101题对称二叉树
题目: 题解: /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ bool isSymmetric(struct TreeNode* root) {if (root NULL) return true;//如果根为空直接…...
TTime:截图翻译/OCR
日常网页翻译Translate Web Pages完全足够,TTime最重要的功能,还是截图翻译,还有个厉害的功能,就是静默OCR,相比之前的分享的识字精灵效率更高。 软件使用 打开软件,点击翻译源设置,建议勾选一…...
【哈希】闭散列的线性探测和开散列的哈希桶解决哈希冲突(C++两种方法模拟实现哈希表)(1)
🎉博主首页: 有趣的中国人 🎉专栏首页: C进阶 🎉其它专栏: C初阶 | Linux | 初阶数据结构 小伙伴们大家好,本片文章将会讲解 哈希函数与哈希 之 闭散列的线性探测解决哈希冲突 的相关内容。 如…...
四川农业大学Java实训项目圆满收官,汇智知了堂引领学子实践创新
近日,四川农业大学与汇智知了堂共同举办的Java实训项目正式迎来了项目汇报阶段。本次实训是汇智知了堂在高等教育领域深化校企合作、推动产教融合的一次重要实践,旨在为广大学子提供一个将理论知识与实际操作相结合的平台。 在实训过程中,汇…...
JavaScript的当前时间设置及Date的运算
作者:私语茶馆 1.场景描述 如下图,在HTML刚加载时,需要将开始时间设置为默认当前时间,结束时间设置为当前时间后7天的时间。手工填写时间时,时间段不超过30天。 这里涉及到两个技术点: 1)Input Date的当前时间设置 2)date的运算 由于是动态修改HTML,所以采用…...
网络安全管理制度
一、总则 目的:本制度旨在保障组织内部网络系统的安全、稳定运行,保护组织的信息资产不受损害,确保业务的连续性和数据的完整性。适用范围:本制度适用于组织内部所有使用网络系统的部门、员工及第三方合作伙伴。 二、网络安全管理…...
零基础,想做一名网络安全工程师,该怎么学习?
相比IT类的其它岗位,网络工程师的学习方向是比较明亮的。想要成为网络工程师,华为认证就是最好的学习方法。而网络工程师的从零开始学习就是从华为认证的初级开始学起,也就是HCIA,也就是从最基本的什么是IP地址、什么是交换机这…...
【大模型部署】在C# Winform中使用文心一言ERNIE-3.5 4K 聊天模型
【大模型部署】在C# Winform中使用文心一言ERNIE-3.5 4K 聊天模型 前言 今天来写一个简单的ernie-c#的例子,主要参考了百度智能云的例子,然后自己改了改,学习了ERNIE模型的鉴权方式,数据流的格式和简单的数据解析,实…...
【Unity】Unity项目转抖音小游戏(三)资源分包,抖音云CDN
业务需求,开始接触一下抖音小游戏相关的内容,开发过程中记录一下流程。 使用资源分包可以优化游戏启动速度,是抖音小游戏推荐的一种方式,抖音云也提供存放资源的CDN服务 抖音云官方文档:https://developer.open-douyi…...
SQLite查询优化
文章目录 1. 引言2. WHERE子句分析2.1. 索引项使用示例 3. BETWEEN优化4. OR优化4.1. 将OR连接的约束转换为IN运算符4.2. 分别评估OR约束并取结果的并集 5. LIKE优化6. 跳跃扫描优化7. 连接7.1. 手动控制连接顺序7.1.1. 使用 SQLITE_STAT 表手动控制查询计划7.1.2. 使用 CROSS …...
UE4编辑器End键Actor贴近地面
void UXXXEditorFunctionLibrary::SnapToFloor(AActor* Actor) { if (Actor) { Actor->Modify(); GEditor->SnapObjectTo(FActorOrComponent(Actor), false, false, false, false); Actor->InvalidateLightingCache(); Actor->UpdateComponentTransforms(); } }...
2024儿科常用心理评估量表汇总,附详细操作步骤与评定标准
在社会的快速发展以及家庭教育模式的转变下,儿童心理健康问题正逐步成为公众瞩目的焦点。焦虑症、抑郁症、适应障碍等儿科常见的症状,不仅对孩子的身心健康构成威胁,更可能在他们的学习旅程和社交互动中制造重重障碍。 儿科医师常用评估量表…...
Python 脚本化 Git 操作:简单、高效、无压力
前言 如何判定此次测试是否达标,代码覆盖率是衡量的标准之一。前段时间,利用fastapi框架重写了覆盖率统计服务,核心其实就是先获取全量代码覆盖率,然后通过diff操作统计增量代码覆盖率,当然要使用diff操作,…...
手搓顺序表(C语言)
目录 SeqList.h SeqList.c 头插尾插复用任意位置插入 头删尾删复用任意位置删除 SLtest.c 测试示例 顺序表优劣分析 SeqList.h //SeqList.h#pragma once#include <stdio.h> #include <assert.h> #include <stdlib.h> #define IN_CY 3typedef int S…...
一文搞懂oracle事务提交以及脏数据落盘的原则
本文基于oracle 19c 做事务提交以及oracle脏数据落盘的相关解读 第一章 相关进程及组件介绍: 1.LGWR: 重做日志条目在系统全局区域 (SGA) 的重做日志缓冲区中生成。LGWR 按顺序将重做日志条目写入重做日志文件。如果数据库具有…...
OceanBase:列存储
目录 1、列存储的定义 1、默认创建列存表 3、指定创建列存表 4、指定创建列存行存冗余表 5、行、列存储查询测试 1、列存储的定义 行存储(Row-based Storage):行存储是以行为单位进行组织和存储数据。在这一模式下,数据库将…...
Rust:WIndows 环境下交叉编译 Linux 平台程序
在Windows下交叉编译Rust程序以在x86_64位的CentOS操作系统上运行,你需要遵循几个步骤来设置交叉编译环境并编译你的程序。以下是一个大致的指南: 1. 安装Rust和Cargo 首先,确保你已经在Windows上安装了Rust和Cargo。你可以从Rust官方网站下…...
从零学爬虫:使用比如说说解析网页结构
新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一、引言 二、网页结构概述 示例:查看网页结构 三、使用比如说说解析网页 1.…...
C#数据类型变量、常量
一个变量只不过是一个供程序操作的存储区的名字。 在 C# 中,变量是用于存储和表示数据的标识符,在声明变量时,您需要指定变量的类型,并且可以选择性地为其分配一个初始值。 在 C# 中,每个变量都有一个特定的类型&…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
C# SqlSugar:依赖注入与仓储模式实践
C# SqlSugar:依赖注入与仓储模式实践 在 C# 的应用开发中,数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护,许多开发者会选择成熟的 ORM(对象关系映射)框架,SqlSugar 就是其中备受…...
毫米波雷达基础理论(3D+4D)
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文: 一文入门汽车毫米波雷达基本原理 :https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)
在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...
【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?
FTP(File Transfer Protocol)本身是一个基于 TCP 的协议,理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况,主要原因包括: ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...
数据结构:泰勒展开式:霍纳法则(Horner‘s Rule)
目录 🔍 若用递归计算每一项,会发生什么? Horners Rule(霍纳法则) 第一步:我们从最原始的泰勒公式出发 第二步:从形式上重新观察展开式 🌟 第三步:引出霍纳法则&…...
MySQL体系架构解析(三):MySQL目录与启动配置全解析
MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录,这个目录下存放着许多可执行文件。与其他系统的可执行文件类似,这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中,用…...
Canal环境搭建并实现和ES数据同步
作者:田超凡 日期:2025年6月7日 Canal安装,启动端口11111、8082: 安装canal-deployer服务端: https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...
Appium下载安装配置保姆教程(图文详解)
目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...
