通过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事件,真的给后续功能的实现提供了很多帮助,其他的事件方法也很全面,用起来还是很舒服的。

        博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

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

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

相关文章

find 几招在 Linux 中高效地查找目录

1. 介绍 在 Linux 操作系统中&#xff0c;查找目录是一项常见的任务。无论是系统管理员还是普通用户&#xff0c;都可能需要查找特定的目录以执行各种操作&#xff0c;如导航文件系统、备份数据、删除文件等。Linux 提供了多种命令和工具来帮助我们在文件系统中快速找到目标目…

浅谈后端整合Springboot框架后操作基础配置

boot基础配置 现在不访问端口8080 可以吗 我们在默认启动的时候访问的是端口号8080 基于属性配置的 现在boot整合导致Tomcat服务器的配置文件没了 我们怎么去修改Tomcat服务器的配置信息呢 配置文件中的配置信息是很多很多的... 复制工程 保留工程的基础结构 抹掉原始…

朴素贝叶斯+SMSSpamCollections

1. 打开 Jupyter 后&#xff0c;在工作目录中&#xff0c;新建一个文件夹命名为 Test01 &#xff0c;并且在文件夹中导入数据 集。在网页端界面点击 “upload” 按钮&#xff0c;在弹出的界面中选择要导入的数据集。然后数据集出现 在 jupyter 文件目录中&#xff0c;此时…

Vue.js Promise 与 async/await 的比较

在现代 Web 开发中&#xff0c;异步操作是不可避免的。在处理异步数据获取时&#xff0c;开发人员通常会使用 Promise 或 async/await。虽然两者都可以实现相同的功能&#xff0c;但它们在代码风格、可读性和错误处理等方面有所不同。本文将对这两种方法进行比较&#xff0c;并…

初识Qt:从Hello world到对象树的深度解析

Qt中的对象树深度解析 Hello world1.图形化界面创建命令行式创建在栈上创建在堆上创建为什么传文本需要QString&#xff0c;std::string不行吗&#xff1f;那为什么要传入this指针&#xff1f;为什么new后不用显示调用delete函数呢&#xff0c;不会造成内存泄漏问题吗&#xff…

python:__class_getitem__使用以及cached_property源码分析

python&#xff1a;__class_getitem__使用以及cached_property源码分析 1 前言 Python中如何模拟泛型类型&#xff1f; 当使用类型标注时&#xff0c;使用 Python 的方括号标记来形参化一个 generic type 往往会很有用处。 例如&#xff0c;list[int] 这样的标注可以被用来表…

深入 OpenFeign:探索缓存、QueryMap、MatrixVariable 和 CollectionFormat 的高级用法以实现优雅的远程调用

免费多模型AI网站,支持豆包、GPT-4o、谷歌Gemini等AI模型&#xff0c;无限制使用&#xff0c;快去白嫖&#x1f449;海鲸AI 一、OpenFeign简介 OpenFeign 是一个声明式的 HTTP 客户端&#xff0c;它使得我们可以通过简单的注解和接口定义来调用远程 HTTP 服务。与传统的 HTTP …

K8S集群再搭建

前述&#xff1a;总体是非常简单的&#xff0c;就是过程繁琐&#xff0c;不过都是些重复的操作 master成员: [controller-manager, scheduler, api-server, etcd, proxy,kubelet] node成员: [kubelet, proxy] master要修改的配置文件有 1. vi /etc/etcd/etcd.conf # 数…

Mokito的一些API

Mockito是一个Java单元测试框架&#xff0c;它允许开发者创建和配置模拟对象&#xff08;mock objects&#xff09;&#xff0c;以便在隔离的环境中测试代码&#xff0c;尤其是当实际对象难以构造或其行为不确定时。下面是一些核心的Mockito API及其使用场景和代码示例。 基础…

wordpress教程视频 wordpress教程网盘 wordpress教程推荐wordpress教程网

WordPress&#xff0c;作为一款强大且灵活的开源内容管理系统&#xff0c;已成为许多网站开发者与运营者的首选。其强大的功能、丰富的插件以及易于上手的特点&#xff0c;使得无论是初学者还是专业开发者都能轻松构建出个性化的网站。然而&#xff0c;对于初学者来说&#xff…

JUnit5标记测试用例

使用场景&#xff1a; 通过Tag对用例分组&#xff1a; 环境分组&#xff1a;测试环境、预发布环境阶段分组&#xff1a;冒烟用例版本分组&#xff1a;V1.1、V1.2 Tag标记用例&#xff1a; 设置标签根据标签执行 结合Maven执行结合测试套件执行 设置标签&#xff1a; 通过T…

NER 数据集格式转换

NER 数据集格式 格式一 某些地方的数据和标签拆成两个文件了 sentences.txt 如 何 解 决 足 球 界 长 期 存 在 的 诸 多 矛 盾 &#xff0c; 重 振 昔 日 津 门 足 球 的 雄 风 &#xff0c; 成 为 天 津 足 坛 上 下 内 外 到 处 议 论 的 话 题 。 该 县 一 手 抓 农 业…

【Spring Cloud】全面解析服务容错中间件 Sentinel 持久化两种模式

文章目录 推送模式本地文件持久化&#xff08;拉模式&#xff09;配置yml编写处理类添加配置演示 配置中心持久化&#xff08;推模式&#xff09;修改nacos在sentinel中生效引入依赖配置文件 修改sentinel在nacos中生效下载源码更改代码演示 总结 推送模式 Sentinel 规则的推送…

allegro 无法删除Xnet

allegro 无法删除Xnet Orcad中打开Constraint Manager之后&#xff0c;再生成网表&#xff0c;导入PCB后就会出现一堆Xnet网络。无法去除Xnet。 解决办法 在原理图ORCAD中&#xff0c; 1、打开Edit Object properties 2、选择Filter by:Capture 3、点击New Property 4、设置…

火山引擎边缘云亮相 Force 原动力大会,探索 AI 应用新范式

5月15日&#xff0c;2024 春季火山引擎 FORCE 原动力大会在北京正式举办。大会聚焦 AI 主题&#xff0c;以大模型应用为核心、以 AI 落地为导向&#xff0c;展示了火山引擎在大模型、云计算领域的实践应用&#xff0c;携手汽车、手机终端、金融、消费、互联网等领域的专家和企业…

2024042102-array-list

数组 Array 一、前言 数组是数据结构还是数据类型&#xff1f; 数组只是个名称&#xff0c;它可以描述一组操作&#xff0c;也可以命名这组操作。数组的数据操作&#xff0c;是通过 idx->val 的方式来处理。它不是具体要求内存上要存储着连续的数据才叫数据&#xff0c;而…

js积累三(web页面一段时间未操作,退出登录)

//核心代码&#xff0c;已封装function CountDownLogout() {/* if 30 seconds no operation then logout */var maxTime 30; // seconds&#xff0c;可自行修改时长var time_time maxTime;/* 鼠标点击事件 */$(document).mousedown(function(){time_time maxTime; //…

Spring Aop对本地事务的影响

1.Transactional声明式事物也是基于aop实现的&#xff0c;public方法加了Transactional注解后&#xff0c;已经成功的创建了事务&#xff0c;但是当前方法仍在方法拦截器中 2.业务方法发生异常之后的处理 判断回滚条件&#xff1a; 如果自定义了RollbackRuleAttribute列表&am…

EI会议的最佳论文奖是什么?如何申请?

EI会议的最佳论文奖通常是指在EI&#xff08;工程索引&#xff0c;Engineering Index&#xff09;收录的学术会议中&#xff0c;评选出的表现最优秀的论文奖项。以下是关于该奖项的一些基本信息及申请步骤&#xff1a; 最佳论文奖的含义 评选标准&#xff1a;最佳论文奖通常基…

多线程、进程、线程五种状态、synchronized、volatile、Lock、CAS、死锁、ThreadLocal

1、并发编程 并发编程三要素 原子性&#xff1a;只一个操作要么全部成功&#xff0c;要么全部失败可见性&#xff1a;一个线程对共享变量的修改&#xff0c;其他线程能够立刻看到有序性&#xff1a;程序执行的顺序按照代码的先后顺序执行 synchronized&#xff0c;Lock解决原…