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

通过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、官方基础用法 ①效果 ②代码&#xff1a; 1.2.2、自定义文档目录&#xff08;实现鼠标悬浮显示完整名称、用icon区分文件和文件夹&#xff09; ①效果&#xff08;直接效…...

C语言 | Leetcode C语言题解之第101题对称二叉树

题目&#xff1a; 题解&#xff1a; /*** 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完全足够&#xff0c;TTime最重要的功能&#xff0c;还是截图翻译&#xff0c;还有个厉害的功能&#xff0c;就是静默OCR&#xff0c;相比之前的分享的识字精灵效率更高。 软件使用 打开软件&#xff0c;点击翻译源设置&#xff0c;建议勾选一…...

【哈希】闭散列的线性探测和开散列的哈希桶解决哈希冲突(C++两种方法模拟实现哈希表)(1)

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; C进阶 &#x1f389;其它专栏&#xff1a; C初阶 | Linux | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解 哈希函数与哈希 之 闭散列的线性探测解决哈希冲突 的相关内容。 如…...

四川农业大学Java实训项目圆满收官,汇智知了堂引领学子实践创新

近日&#xff0c;四川农业大学与汇智知了堂共同举办的Java实训项目正式迎来了项目汇报阶段。本次实训是汇智知了堂在高等教育领域深化校企合作、推动产教融合的一次重要实践&#xff0c;旨在为广大学子提供一个将理论知识与实际操作相结合的平台。 在实训过程中&#xff0c;汇…...

JavaScript的当前时间设置及Date的运算

作者:私语茶馆 1.场景描述 如下图,在HTML刚加载时,需要将开始时间设置为默认当前时间,结束时间设置为当前时间后7天的时间。手工填写时间时,时间段不超过30天。 这里涉及到两个技术点: 1)Input Date的当前时间设置 2)date的运算 由于是动态修改HTML,所以采用…...

网络安全管理制度

一、总则 目的&#xff1a;本制度旨在保障组织内部网络系统的安全、稳定运行&#xff0c;保护组织的信息资产不受损害&#xff0c;确保业务的连续性和数据的完整性。适用范围&#xff1a;本制度适用于组织内部所有使用网络系统的部门、员工及第三方合作伙伴。 二、网络安全管理…...

零基础,想做一名网络安全工程师,该怎么学习?

​ 相比IT类的其它岗位&#xff0c;网络工程师的学习方向是比较明亮的。想要成为网络工程师&#xff0c;华为认证就是最好的学习方法。而网络工程师的从零开始学习就是从华为认证的初级开始学起&#xff0c;也就是HCIA&#xff0c;也就是从最基本的什么是IP地址、什么是交换机这…...

【大模型部署】在C# Winform中使用文心一言ERNIE-3.5 4K 聊天模型

【大模型部署】在C# Winform中使用文心一言ERNIE-3.5 4K 聊天模型 前言 今天来写一个简单的ernie-c#的例子&#xff0c;主要参考了百度智能云的例子&#xff0c;然后自己改了改&#xff0c;学习了ERNIE模型的鉴权方式&#xff0c;数据流的格式和简单的数据解析&#xff0c;实…...

【Unity】Unity项目转抖音小游戏(三)资源分包,抖音云CDN

业务需求&#xff0c;开始接触一下抖音小游戏相关的内容&#xff0c;开发过程中记录一下流程。 使用资源分包可以优化游戏启动速度&#xff0c;是抖音小游戏推荐的一种方式&#xff0c;抖音云也提供存放资源的CDN服务 抖音云官方文档&#xff1a;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儿科常用心理评估量表汇总,附详细操作步骤与评定标准

在社会的快速发展以及家庭教育模式的转变下&#xff0c;儿童心理健康问题正逐步成为公众瞩目的焦点。焦虑症、抑郁症、适应障碍等儿科常见的症状&#xff0c;不仅对孩子的身心健康构成威胁&#xff0c;更可能在他们的学习旅程和社交互动中制造重重障碍。 儿科医师常用评估量表…...

Python 脚本化 Git 操作:简单、高效、无压力

前言 如何判定此次测试是否达标&#xff0c;代码覆盖率是衡量的标准之一。前段时间&#xff0c;利用fastapi框架重写了覆盖率统计服务&#xff0c;核心其实就是先获取全量代码覆盖率&#xff0c;然后通过diff操作统计增量代码覆盖率&#xff0c;当然要使用diff操作&#xff0c…...

手搓顺序表(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脏数据落盘的相关解读 第一章 相关进程及组件介绍&#xff1a; 1.LGWR&#xff1a; 重做日志条目在系统全局区域 &#xff08;SGA&#xff09; 的重做日志缓冲区中生成。LGWR 按顺序将重做日志条目写入重做日志文件。如果数据库具有…...

OceanBase:列存储

目录 1、列存储的定义 1、默认创建列存表 3、指定创建列存表 4、指定创建列存行存冗余表 5、行、列存储查询测试 1、列存储的定义 行存储&#xff08;Row-based Storage&#xff09;&#xff1a;行存储是以行为单位进行组织和存储数据。在这一模式下&#xff0c;数据库将…...

Rust:WIndows 环境下交叉编译 Linux 平台程序

在Windows下交叉编译Rust程序以在x86_64位的CentOS操作系统上运行&#xff0c;你需要遵循几个步骤来设置交叉编译环境并编译你的程序。以下是一个大致的指南&#xff1a; 1. 安装Rust和Cargo 首先&#xff0c;确保你已经在Windows上安装了Rust和Cargo。你可以从Rust官方网站下…...

从零学爬虫:使用比如说说解析网页结构

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言 二、网页结构概述 示例&#xff1a;查看网页结构 三、使用比如说说解析网页 1.…...

C#数据类型变量、常量

一个变量只不过是一个供程序操作的存储区的名字。 在 C# 中&#xff0c;变量是用于存储和表示数据的标识符&#xff0c;在声明变量时&#xff0c;您需要指定变量的类型&#xff0c;并且可以选择性地为其分配一个初始值。 在 C# 中&#xff0c;每个变量都有一个特定的类型&…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解

一、前言 在HarmonyOS 5的应用开发模型中&#xff0c;featureAbility是旧版FA模型&#xff08;Feature Ability&#xff09;的用法&#xff0c;Stage模型已采用全新的应用架构&#xff0c;推荐使用组件化的上下文获取方式&#xff0c;而非依赖featureAbility。 FA大概是API7之…...