《ElementUI 基础知识》el-tree 之“我的电脑”目录结构效果

前言

项目需求，Web 端获取服务器文件夹目录结构。目录数据是调接口获取，本篇略过，直接展现数据！

效果

在这里插入图片描述

实现

html

  • 代码 8 - 15 行，自定义节点信息；
  • 代码 9 - 14 行，判断 icon 显示；
<el-tree
    ref="tree"
    :data="treeData"
    accordion
    node-key="level"
    :props="defaultTreeProps"
    @node-click="handleNodeClick">
    <span slot-scope="{ node, data }"  style="display: flex;">
        <!-- 父节点-未展开 -->
        <i v-if="node.childNodes.length > 0 && !node.expanded" class="my-icon folder-icon"/>
        <!-- 父节点-已展开 -->
        <i v-else-if="node.childNodes.length > 0 && node.expanded" class="my-icon folder-open-icon"/>
        <!-- 子节点 -->
        <i v-else class="my-icon file-icon"/>
        {{ node.label}}
    </span>
</el-tree>

数据

treeData: [{
    text: '我的电脑',
    children: [
        {
            text: '桌面:\\',
            path: "C:\\Users\\admin\\Desktop",
            children: [
                {
                    text: '新建文件夹',
                    path: "C:\\Users\\admin\\Desktop\\新建文件夹",
                    children: [
                        {
                            text: 'test.txt',
                            path: "C:\\Users\\admin\\Desktop\\test.txt",
                        },
                        {
                            text: '报表.xlsx',
                            path: "C:\\Users\\admin\\Desktop\\报表.xlsx",
                        },
                    ]
                },
                {
                    text: '测试文档.xlsx',
                    path: "C:\\Users\\admin\\Desktop\\测试文档.xlsx",
                },
            ]

        },
        {
            text: 'C:\\',
            path: "C:\\",
            children: [
                {
                    text: 'Program Files',
                    path: "C:\\Users\\admin\\Desktop\\Program Files",
                    children: [
                        {
                            text: 'Microsoft Office',
                            path: "C:\\Users\\admin\\Desktop\\Microsoft Office",
                            children: [
                                {
                                    text: '季度总结.docx',
                                    path: "C:\\Users\\admin\\Desktop\\Microsoft Office\\季度总结.docx",
                                },
                                {
                                    text: '季度汇报.pptx',
                                    path: "C:\\Users\\admin\\Desktop\\Microsoft Office\\季度汇报.pptx",
                                },
                            ]
                        },
                        {
                            text: '报表.xlsx',
                            path: "C:\\Users\\admin\\Desktop\\报表.xlsx",
                        },
                    ]
                },
                {
                    text: '测试文档.xlsx',
                    path: "C:\\Users\\admin\\Desktop\\测试文档.xlsx",
                    leaf: true,
                },
            ]

        },
        {
            text: 'D:\\',
            path: "D:\\",
            children: [
                {
                    text: '游戏',
                    path: "D:\\游戏",
                    children: [
                        {
                            text: '游戏01.xlsx',
                            path: "D:\\游戏\\游戏01.xlsx",
                        },
                        {
                            text: '游戏02.xlsx',
                            path: "D:\\游戏\\游戏02.xlsx",
                        },
                    ]
                },
            ]

        },
        {
            text: 'E:\\',
            path: "E:\\",
            children: [
                {
                    text: '电影',
                    path: "E:\\电影",
                    children: [
                        {
                            text: '玩具总动员.mp4',
                            path: "E:\\电影\\玩具总动员.mp4",
                        },
                        {
                            text: '冰雪奇缘.mp4',
                            path: "E:\\电影\\冰雪奇缘.mp4",
                        },
                        {
                            text: '疯狂动物城.mp4',
                            path: "E:\\电影\\疯狂动物城.mp4",
                        },
                    ]
                },
            ]
        },
        
    ]
}],

完整代码

注意是 Vue2 文件

<template>
    <div class="dir-tree-main">
        <el-dialog title="我的电脑" :visible.sync="dialogVisible" class="directory-dialog" v-if="dialogVisible">
            <el-tree
                ref="tree"
                :data="treeData"
                accordion
                node-key="level"
                :props="defaultTreeProps"
                @node-click="handleNodeClick">
                <span slot-scope="{ node, data }"  style="display: flex;">
                    <!-- 父节点-未展开 -->
                    <i v-if="node.childNodes.length > 0 && !node.expanded" class="my-icon folder-icon"/>
                    <!-- 父节点-已展开 -->
                    <i v-else-if="node.childNodes.length > 0 && node.expanded" class="my-icon folder-open-icon"/>
                    <!-- 子节点 -->
                    <i v-else class="my-icon file-icon"/>
                    {{ node.label}}
                </span>
            </el-tree>
            <div class="btns">
                <el-button type="info" @click="dialogVisible=false;">取消</el-button>
                <el-button type="primary" @click="onSelect">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dialogVisible: false,
            treeData: [{
                text: '我的电脑',
                children: [
                    {
                        text: '桌面:\\',
                        path: "C:\\Users\\admin\\Desktop",
                        children: [
                            {
                                text: '新建文件夹',
                                path: "C:\\Users\\admin\\Desktop\\新建文件夹",
                                children: [
                                    {
                                        text: 'test.txt',
                                        path: "C:\\Users\\admin\\Desktop\\test.txt",
                                    },
                                    {
                                        text: '报表.xlsx',
                                        path: "C:\\Users\\admin\\Desktop\\报表.xlsx",
                                    },
                                ]
                            },
                            {
                                text: '测试文档.xlsx',
                                path: "C:\\Users\\admin\\Desktop\\测试文档.xlsx",
                            },
                        ]

                    },
                    {
                        text: 'C:\\',
                        path: "C:\\",
                        children: [
                            {
                                text: 'Program Files',
                                path: "C:\\Users\\admin\\Desktop\\Program Files",
                                children: [
                                    {
                                        text: 'Microsoft Office',
                                        path: "C:\\Users\\admin\\Desktop\\Microsoft Office",
                                        children: [
                                            {
                                                text: '季度总结.docx',
                                                path: "C:\\Users\\admin\\Desktop\\Microsoft Office\\季度总结.docx",
                                            },
                                            {
                                                text: '季度汇报.pptx',
                                                path: "C:\\Users\\admin\\Desktop\\Microsoft Office\\季度汇报.pptx",
                                            },
                                        ]
                                    },
                                    {
                                        text: '报表.xlsx',
                                        path: "C:\\Users\\admin\\Desktop\\报表.xlsx",
                                    },
                                ]
                            },
                            {
                                text: '测试文档.xlsx',
                                path: "C:\\Users\\admin\\Desktop\\测试文档.xlsx",
                                leaf: true,
                            },
                        ]

                    },
                    {
                        text: 'D:\\',
                        path: "D:\\",
                        children: [
                            {
                                text: '游戏',
                                path: "D:\\游戏",
                                children: [
                                    {
                                        text: '游戏01.xlsx',
                                        path: "D:\\游戏\\游戏01.xlsx",
                                    },
                                    {
                                        text: '游戏02.xlsx',
                                        path: "D:\\游戏\\游戏02.xlsx",
                                    },
                                ]
                            },
                        ]

                    },
                    {
                        text: 'E:\\',
                        path: "E:\\",
                        children: [
                            {
                                text: '电影',
                                path: "E:\\电影",
                                children: [
                                    {
                                        text: '玩具总动员.mp4',
                                        path: "E:\\电影\\玩具总动员.mp4",
                                    },
                                    {
                                        text: '冰雪奇缘.mp4',
                                        path: "E:\\电影\\冰雪奇缘.mp4",
                                    },
                                    {
                                        text: '疯狂动物城.mp4',
                                        path: "E:\\电影\\疯狂动物城.mp4",
                                    },
                                ]
                            },
                        ]
                    },
                    
                ]
            }],
            defaultTreeProps: {
                children: 'children',
                label: 'text'
            },
            currNode: null
        }
    },
    methods: {
        // node click
        handleNodeClick(data, node, component) {
            console.log(data, node);
            // 当前node
            this.currNode = node;
        },
        // 确定
        onSelect() {
            // TODO
            this.dialogVisible = false;
        }
    },
    mounted() {
        setTimeout(() => {
            this.dialogVisible = true;
        }, 100)
    },
}
</script>
<style lang="stylus" scoped>
.dir-tree-main {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #999;
}
.directory-dialog {
    .el-dialog {
        margin-top: 10vh !important;
    }
    .el-tree {
        height: 50vh;
        overflow-y: scroll;
        border: 1px solid #999;
    }
    .btns {
        margin-top: 20px;
        display: flex;  
    }
}
.my-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    margin-right: 8px;
}
.file-icon {
    background: url(../assets/images/file2.png);
}
.folder-icon {
    background: url(../assets/images/folder.png);
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
}
.folder-open-icon {
    background: url(../assets/images/folder-open2.png);
}
</style>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据仓库项目---Day01

数据仓库项目---Day01

文章目录 框架的安装包数据仓库概念项目需求及架构设计项目需求分析项目框架技术选型系统数据流程设计框架版本选型集群资源规划设计 数据生成模块数据埋点主流埋点方式埋点数据上报时机 服务器和JDK准备搭建三台Linux虚拟机(VMWare)编写集群分发脚本xsyncSSH无密登录配置JDK准…
阅读更多...
顶顶通呼叫中心中间件电话黑名单系统介绍

顶顶通呼叫中心中间件电话黑名单系统介绍

黑名单 有显示成功和失败导入数&#xff0c;可以禁用也可以启用&#xff0c;如果禁用状态就是不使用这一组黑名单&#xff0c;多个号码核验就是验证号码存不存在。黑名单只有管理员和操作员可以配置&#xff0c;租户是看不到黑名单的。但是黑名单跟租户是互通的。 可以单个号码…
阅读更多...
计算机毕业设计Python+Vue.js天气预测系统 中国气象质量采集与可视化 天气数据分析 天气可视化 天气大数据 天气爬虫 大数据毕业设计

计算机毕业设计Python+Vue.js天气预测系统 中国气象质量采集与可视化 天气数据分析 天气可视化 天气大数据 天气爬虫 大数据毕业设计

摘要 随着科技技术的不断发展&#xff0c;人民物质生活质量不断提高&#xff0c;我们越来越关注身边的气象、空气等地理环境。对于普通居民我们会选择合适的气象进行出游&#xff0c;提高精神层面的生活质量&#xff1b;对于企业会关注气象变换状况&#xff0c;来定制相关的生产…
阅读更多...
使用.NET8实现Web API

使用.NET8实现Web API

目录 1、环境准备1.1、从官网下载 及安装VS2022社区版1.2、下载及安装asp.net core的运行时及IIS Module 2、WebAPI工程创建2.1 创建API服务2.2 推荐的库2.2.1 数据库篇2.2.1.1、 SQLSugar2.2.1.2、 OracleAccess 2.2.2、IOC篇2.2.2.1、autofac2.2.2.2、 2.2.3、日志记录篇2.2.…
阅读更多...
MY SQL 实验一：

MY SQL 实验一：

一、实验目的 通过实验了解MYSQL数据库服务器的基本架构及基本的使用方法。 二、实验原理、条件 本实验采用著名的开源数据库软件MYSQL 作为实验平台。MYSQL有多种版本&#xff0c;常用的是服务器版。数据库引擎是用于存储、处理和保护数据的核心服务。MYSQL有多个数据库引擎&a…
阅读更多...
【北京迅为】《iTOP-3588开发板快速烧写手册》-第4章 烧写器RKDevTool常用功能

【北京迅为】《iTOP-3588开发板快速烧写手册》-第4章 烧写器RKDevTool常用功能

RK3588是一款低功耗、高性能的处理器&#xff0c;适用于基于arm的PC和Edge计算设备、个人移动互联网设备等数字多媒体应用&#xff0c;RK3588支持8K视频编解码&#xff0c;内置GPU可以完全兼容OpenGLES 1.1、2.0和3.2。RK3588引入了新一代完全基于硬件的最大4800万像素ISP&…
阅读更多...
规培报名身份证上传怎么小于500k？这几个方法试试看

规培报名身份证上传怎么小于500k？这几个方法试试看

大家都知道在规培报名的时候&#xff0c;是需要上传一些自己的个人信息资料到平台上的&#xff0c;其中身份证照片是比较重要的一项&#xff0c;我们自己拍的身份证照片大小有时候可能不符合网站的规定&#xff0c;需要去做一些图片修改调整&#xff0c;比如图片你压缩&#xf…
阅读更多...
【自动驾驶|毫米波雷达】初识毫米波雷达射频前端硬件

【自动驾驶|毫米波雷达】初识毫米波雷达射频前端硬件

第一次更新&#xff1a;2024/5/4 目录 整体概述 混频器&#xff08;MIXER&#xff09; 低通滤波器&#xff08;LPF&#xff1a;Low-Pass filter&#xff09; 数模转换器&#xff08;ADC&#xff1a;Analog to Digital Converter&#xff09; 毫米波雷达功能框图 整体概述 完…
阅读更多...
1072 开学寄语（测试点2）

1072 开学寄语（测试点2）

solution 测试点2:物品编号可能不足四位&#xff0c;高位需补0 #include<iostream> #include<string> using namespace std; const int maxn 1e5; int flag[maxn] {0}; int main(){int n, m, k, cnt 0, cnt1 0, have, x;string id;cin >> n >> m…
阅读更多...
基于STM32的智能垃圾桶设计(论文+源码)_kaic

基于STM32的智能垃圾桶设计(论文+源码)_kaic

基于STM32的智能垃圾桶设计 摘 要 随着社会科学技术的迅猛进展&#xff0c;人们的生活质量和速度也在不断提高。然而&#xff0c;大多数传统的家庭垃圾桶已经过时且缺乏创新&#xff0c;缺乏人性化设计。它们使用起来不方便、不卫生&#xff0c;所有的生活和废物垃圾都被混合…
阅读更多...
跨平台桌面客户端开发框架

跨平台桌面客户端开发框架

跨平台桌面客户端开发框架允许开发者创建能够在多个操作系统上运行的桌面应用程序。以下是一些流行的跨平台桌面客户端开发框架。这些框架各有优势&#xff0c;选择哪个框架取决于项目需求、团队的技术栈以及对特定特性的偏好。 1.Electron &#xff1a; 使用JavaScript, HTML…
阅读更多...
融知财经：期权期货及其他衍生产品

融知财经：期权期货及其他衍生产品

期权、期货及其他衍生产品是金融市场中用于管理风险和进行投机的金融工具。这些衍生产品的价值依赖于一个或多个基础资产&#xff0c;如股票、商品、利率、汇率等。以下是关于这些衍生产品的一些基本介绍&#xff1a; 1、期货&#xff08;Futures&#xff09;&#xff1a;期货是…
阅读更多...
5月7号（信息差）

5月7号（信息差）

&#x1f30d;首次&#xff0c;西湖大学用蛋白质语言模型定向改造碱基编辑器&#xff0c;登Cell子刊 https://www.jiqizhixin.com/articles/2024-05-07-10 &#x1f384; 哈马斯宣布同意停火提议 https://finance.eastmoney.com/a/202405073067687785.html ✨ 中国将对…
阅读更多...
数据结构学习：栈（详细讲解）

数据结构学习：栈（详细讲解）

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;C语言基本概念 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 &#x1f697;1.对栈概念理解&#xff1a; &a…
阅读更多...
【Debug日记】albumentations包安装失败解决方案

【Debug日记】albumentations包安装失败解决方案

直接pip安装pip install albumentations 报错&#xff1a; ERROR: Command errored out with exit status 1:command: D:\anaconda3\envs\pytorch\python.exe D:\anaconda3\envs\pytorch\lib\site-packages\pip\_vendor\pep517\in_process\_in_process.py build_wheel C:\Users…
阅读更多...
【编程题-错题集】连续子数组最大和（动态规划 - 线性 dp）

【编程题-错题集】连续子数组最大和（动态规划 - 线性 dp）

牛客对应题目链接&#xff1a;连续子数组最大和_牛客题霸_牛客网 (nowcoder.com) 一、分析题目 简单线性 dp。 1、状态表示 dp[i] 表示&#xff1a;以 i 位置为结尾的所有子数组中&#xff0c;最大和是多少。 2、状态转移方程 dp[i] max(dp[i - 1] arr[i], arr[i]) 3、返回…
阅读更多...
Sarcasm detection论文解析 |使用 BERT 进行中间任务迁移学习的刺检测

Sarcasm detection论文解析 |使用 BERT 进行中间任务迁移学习的刺检测

论文地址 论文地址&#xff1a;https://www.mdpi.com/2227-7390/10/5/844#/ github&#xff1a;edosavini/TransferBertSarcasm (github.com) 论文首页 笔记框架 使用 BERT 进行中间任务迁移学习的讽刺检测 &#x1f4c5;出版年份:2022 &#x1f4d6;出版期刊:Mathematics &…
阅读更多...
[C/C++] -- 装饰器模式

[C/C++] -- 装饰器模式

装饰器模式是一种结构型设计模式&#xff0c;它允许在不改变原始对象的基础上动态地扩展其功能。这种模式通过将对象包装在装饰器类的对象中来实现&#xff0c;每个装饰器对象都包含一个原始对象&#xff0c;并可以在调用原始对象的方法之前或之后执行一些额外的操作。 装饰器…
阅读更多...
炫龙电脑数据恢复方法有哪些？4个常用方法大放送

炫龙电脑数据恢复方法有哪些？4个常用方法大放送

随着科技的不断发展&#xff0c;电脑已成为我们日常生活中不可或缺的一部分。然而&#xff0c;无论是由于操作失误、病毒感染、系统崩溃还是硬件故障&#xff0c;数据丢失都可能是每个电脑用户都可能面临的问题。对于使用炫龙电脑的用户来说&#xff0c;了解并掌握一些基本的数…
阅读更多...
webassembly入门详解（C++）

webassembly入门详解（C++）

一、环境配置 环境说明，操作系统为window操作系统。 1.1 下载和安装python 下载 需要python版本至少3.6版本 python下载地址:https://www.python.org/getit/ 安装 检测安装结果 win+R组合键->cmd->输入python->回车 1.2 下载和安装emsdk 下载 下载地址：https://gi…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站