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

最新推荐文章于 2024-05-21 17:24:06 发布
最新推荐文章于 2024-05-21 17:24:06 发布
阅读量745 收藏 8
点赞数 9
分类专栏： 《ElementUI 基础知识》 文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_31213021/article/details/138565899
版权

前言

项目需求，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>
AvatarGiser
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue和Vue-Element-Admin（二）：vue-element-admin的目录结构和使用
叶子叶来
11-20 7965
Vue-Element-Admins是前端成熟框架，基于vue+element ui的开源技术方案：vue-element-admin 码云地址，教程：vue-element-admin教程，界面简洁清爽； 本地安装node.js和git工具，copy到本地即可运行，框架默认使用mock数据 # 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 进入项目目录 cd vue-element-admin # 安..
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
通过el-tree自定义渲染网页版工作目录，实现鼠标悬浮显示完整名称、用icon区分文件和文件夹等需求
RenGJ010617的博客
05-21 1832
将服务器的工作目录渲染到前端页面上是经常遇到需要实现的需求，其中从后端API获取本地目录信息后，将数据渲染成自定义的前端工作目录是篇博客将要谈到的主要内容
el-tree实现类似windows文件列表，并支持折叠、展开和重命名
可可爱爱的你吖的博客
10-21 1897
el-tree实现类似windows文件列表，并支持折叠、展开和重命名
el-tree的基础使用
2201_75705263的博客
05-19 439
el-tree
Element-UI源码之目录结构
东逝水
04-09 5567
克隆代码 git clone https://github.com/ElemeFE/element.git 慢慢等吧，看运气了 从最新的发布分支上切一个分支出来 git tag 看到所有的发布之后的分支打的tag，v2.13.0是最新的 git checkout v2.13.0 git checkout -b reading 目录结构overview - build项目构建命令的目录 - e...
ElementPlus用Tree修改添加目录（vue3）
zsy1833579605的博客
05-08 308
部分样式没调，可以自行调一下，我的项目做了自动导入，详见ElementPuls官方文档。
vue-element-template 做后台（二）before coding 目录结构&风格指南
immocha的博客
04-17 509
在正式开始项目代码之前，阅读vue-element-template的项目结构和风格指南，对之后写出条理清晰，易于阅读的代码很有帮助，强烈建议阅读一遍，做到心里有底。 目录结构(v4.0+) 特别注意mock、api、view，对于简单的开发，也是始终会用到的。 mock请参考：https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/...
2021搭建企业级后台（Vue + TS + Element Plus ）～ 3.目录结构说明及初始化
yuan
08-17 378
目录结构说明 node_modules 第三⽅包存储⽬录 public 静态资源⽬录，任何放置在 public ⽂件夹的静态资源都会被简单的复制，⽽不经过 webpack favicon.ico 浏览器标签页图标 index.html 单页面 src 源文件 assets 公共资源⽬录，放图⽚等资源 components 公共组件⽬录 router 路由相关模块 store 容器相关模块 views 路由⻚⾯组件存储⽬录 App.vue *根组件，最终被替换渲染到 index.ht
ElementUI中el-tree节点的操作的实现
10-15
在ElementUI中，`el-tree`组件用于展示树形数据，它提供了丰富的功能，包括节点的增删改查。在本教程中，我们将探讨如何实现`el-tree`节点的各种操作，包括获取选中节点的ID、添加节点、修改节点以及删除节点。 ...
封装ElementUI组件el-tree
最新发布
06-21
`el-tree`是ElementUI中的树形控件，用于展示层次结构的数据。在实际项目中，我们可能需要对其进行定制，以满足特定需求。以下是对这个封装过程的详细解释： 1. **自定义VNode节点图标**： Vue.js使用虚拟DOM...
elementuitree递归增加删除文件文件夹
08-12
element-ui tree，递归增加、删除文件/文件夹
el-tree-selected-tree
11-15
在Element UI库中，`el-tree` 是一个强大的组件，用于构建可交互的树形结构数据展示。在实际开发中，我们经常需要处理用户选择的节点，并可能需要独立展示这些选中节点，甚至允许用户在独立的树结构中进行删除操作。...
element-ui 导航栏三级
weixin_55959870的博客
02-24 2394
list 数据 list: [ { path: "/1", name: "导航一", icon:'el-icon-menu', children: [ { path: "/1/1", name: "导航1-1", icon:'el-icon-menu', children
Java||Springboot读取本地目录的文件和文件结构，读取服务器文档目录数据供前端渲染的API实现
RenGJ010617的博客
05-18 2168
将服务器的工作目录渲染到前端页面上是经常遇到需要实现的需求，其中通过后端API读取本地目录，获取文件信息和文件系统层级数据是篇博客将要谈到的主要内容。
基于element-ui Tree树形控件 生成 文件目录 缩进树
Jas3000的博客
02-02 3106
前几天需要展示一个文件目录，选择到的是AntV G6 的缩进树。 收缩效果确实不错，不过在使用的过程中 遇到了 G6 的 BUG，传入数据对象的最后一层，不能正常展开收缩且会 无限循环报错 。 索性就用 element Tree 组件 + border 边框 来制作 缩进图。 这是G6效果 这是 element 效果 PS 正常情况下，文件目录缩进树 用图类 做出来的效果肯定会好一点。 首先 element Tree树形组件 先引入 <div id="dataset-label-visual
【Element】el-tree 树形控件
joanmelon的博客
12-10 7519
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
热门推荐
Sabrina_cc的博客
12-03 1万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
el-tree树状的使用
weixin_42371812的博客
10-31 1910
研究了一下elementUi框架里的tr-tree的用法。趁着现在还有些头热，先记下我所学习到的内容吧。 el-tree在实际工作中使用还是蛮多的，比如权限控制，商品无限级分类……都会用上它。 先贴一段我学习的代码吧。
介绍下 elementui 中的 el-tree
05-19
elementui 中的 el-tree 是一个树形控件，用于展示层级结构的数据。它可以展开和折叠子节点，支持多选和单选模式，可以通过自定义节点内容来展示不同类型的数据。el-tree 也提供了一些事件和方法，使得开发者可以方便地对树形控件进行操作，比如选中节点、展开节点、获取节点信息等等。 在使用 el-tree 的时候，我们需要提供一个树形数据源，数据源需要符合一定的格式，比如每个节点需要包含一个 label 属性用于展示节点名称，children 属性用于存放子节点等等。同时，我们还可以通过一些配置项来自定义节点的样式、展开图标、选中状态等等，以满足不同的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值