黑豹程序员-ElementPlus支持树型组件带图标以及icon避坑

Vueel-tree在ElementUI和ElementPlus中的使用及Icon绑定的差异

最新推荐文章于 2025-09-11 04:50:23 发布

原创

最新推荐文章于 2025-09-11 04:50:23 发布 · 857 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue3 #ElementPlus

效果

在这里插入图片描述

vue代码

参数说明：node当前节点，data当前节点后台传入数据。
el-tree自身不支持图标，需要自己去利于实现，并有个坑，和elementui写法不同。

        <el-col :span="12">
          <el-form-item label="绑定权限">
            <el-tree ref="permissTree" :data="dictTreeData" :h

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

长安紫薯

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ElementUI Tree 树形控件的使用并给节点添加图标

11-21

前言：因为项目需要用Vue做一个管理系统，其中有一个公司部门的管理页面有用到ElementUI 的树形控件，但是结构中没有使用chexkBox选项框，针对这个功能碰到的一些问题做一下总结一，数据渲染 1）在标签中绑定data属性 2）在vue实例的data中声明list变量 3）从后台获取到的数据是以数组里面嵌套多个对象的结构并赋值给list，当前的数据是OrgName为当前结构名称， Children作为子分支数组，子分支中的结构与当前结构一致 4）在页面中展示结构的方法是在标签中绑定porps属性，并在vue实例的data中用l

商业编程-源码-树型控件实现数据库的访问》配套代码.zip

06-23

本压缩包“商业编程-源码-树型控件实现数据库的访问》配套代码.zip”提供了关于如何利用树型控件来实现数据库访问的源代码示例。下面我们将深入探讨这一主题，讲解相关知识点。首先，树型控件（Tree View Control...

参与评论您还未登录，请先登录后发表或查看评论

element-plus的Tree 树形控件添加图标

qq_70032585的博客

10-11

4193

- 非第一级且没子元素且选中了是个黄色文件图标 -->-- 非第一级且没子元素且未选中是个文件图标 -->-- 非第一级且有子元素是个文件夹图标 -->{ id: 5, label: "一楼", a: 1 },{ id: 6, label: "二楼", a: 1 },{ id: 7, label: "三楼", a: 1 },-- 第一级固定一个图标 -->label: "一楼",label: "二楼",label: "教学楼",label: "宿舍楼",// 这个打印出来的是node。

Element Plus树形组件：Tree、TreeSelect数据绑定与操作

热门推荐

意初的博客

09-26

1万+

重点：template蒙版下svg和use，然后前端遍历添加key和value，取判断放图标for循环数据，前端自定义tree图标第一种方法，后端key没有icon字段，自己添加直接map遍历前端自定义tree图标。

Element Plus ----- el-tree 树型控件手动展开收起

weixin_56300816的博客

06-18

2938

但是默认展开后的树占用了非常大的空间，也会影响用户体验，于是我们可以增加一个按钮来控制树型结构的展开和收缩。可能会遇到数据太多导致树结构过长的情况，若用户想要查看所有的数据结点，则需要一个一个去展开，着实影响用户体验。这么简单的功能element官方应该会有API提供吧，但是当我们去官方文档中找时，发现根本没有这个API。这种情况我们可以用树形控件的 default-expand-all 属性，令其默认全部展开。但是当我们输出Tree组件时，可以发现其实是有控制节点展开或收起的属性的。

Android开发实战经典-020719树型组件：ExpandableListView源代码和视频教程.zip

07-26

Android开发实战经典_020719树型组件：ExpandableListView源代码和视频教程.zip

swift-一个树型界面支持单选多选或者只展示。使用方式多样

08-15

标题提到的"YPTreeView"是一个专为Swift开发的树形视图组件，它提供了单选、多选以及仅展示的功能，具有高度可定制性，适用于各种项目需求。 "YPTreeView"的核心特性包括： 1. **单选与多选**：用户可以根据需求...

精选资源

活字格-菜单和树型图.zip

09-09

"活字格-菜单和树型图.zip"这个压缩包文件包含了用于构建和自定义菜单以及树型图的资源和组件。活字格，可能是一个低代码开发平台，旨在简化应用开发过程，允许用户通过图形化界面创建和设计功能丰富的应用程序。在...

(el-Tree)操作(不使用 ts)：Element-plus 中Tree 树形控件的样式等的使用

狮子座的男孩

06-14

7009

【代码】(el-Tree)操作：Element-plus 中Tree 树形控件的样式等的使用。

elementPlus-tree 自定义展开，收起图标

海带的博客

08-22

3261

elementPlus-tree 自定义展开，收起图标

element-plus2.5.10版本el-tree按不同级别设置不同图标与选中图标

个人博客

10-25

3558

基于插槽

element-plus tree自定义图标

虚无缥缈

03-08

1527

【代码】element-plus tree自定义图标。

如何对ElementUI、ElementPlus中的Tree树组件进行美化，如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果？本文给你答案！

都随它大小便吧

11-08

9117

ElementUI、ElementPlus树组件功能很不错，但是官方的树形组件没有显示线条，感觉稍微不够大气。于是网上查了一些资料，找了很多也感觉也不够完美，最后找到一个还不错的实现方案，并且再美化改进一下，分享给大家。

Element Plus 的树形控件中给节点添加图标

glb254869211的博客

07-08

551

在树形控件中通过自定义节点内容给节点添加图标。

关于element-plus的el-tree 组件常用属性及api及控制可拖动层级，el-tree 自定义全选单选数据小笔记

努力飞起的菜鸟

03-19

3817

1 需要控制最大层级 tree 当前到第几可拖动 :allow-drop="allowDrop"2 @check-change="handleCheckbranch" 方法收集选择标识。拖拽时判定目标节点能否成为拖动目标位置。3 拖动配置激活Ui 样式自定义。

Element UI-给树形控件添加图标

itmacy的博客

05-17

5653

Element UI -给树形控件添加图标