基本的树代码

<el-tree :data="data" node-key="id" :props="defaultProps" @node-click="handleNodeClick">
</el-tree>

在树代码中间，增加span标签，通过:class绑定icon，通过label绑定树的名称

<el-tree :data="data" node-key="id" :props="defaultProps" @node-click="handleNodeClick"><span class="custom-tree-node" slot-scope="{ node, data }"><span><i :class="data.icon"></i>{{ data.label }}</span></span>
</el-tree>

在data数据中，给每个对象绑定icon，值为需要的icon图标

data: [{label: '一级 1',icon:'el-icon-user',children: [{label: '二级 1-1',children: [{label: '三级 1-1-1'}]}]
}, {label: '一级 2',icon:'el-icon-user',children: [{label: '二级 2-1',icon:'el-icon-user',children: [{label: '三级 2-1-1',icon:'el-icon-user',}]}, {label: '二级 2-2',children: [{label: '三级 2-2-1'}]}]
}, {label: '一级 3',children: [{label: '二级 3-1',children: [{label: '三级 3-1-1'}]}, {label: '二级 3-2',children: [{label: '三级 3-2-1'}]}]
}],

运行结果：

ElementUI：tree给节点添加icon图标相关推荐

给 element-ui 表格的表头添加icon图标
el-table icon图标的设置,使用 slot="header" 插槽,然后直接通过设置类名为 el-icon-iconName 来使用即可. <el-table-co ...
如何快速的给你的项目添加icon图标
如何快速的给你的项目添加icon图标下载软件如何制作图片将制作的图标拖到项目当中设置启动页注意: 如果手动添加了启动页的话,记得将Launch Screen中的东西清除掉
qt修改程序图标名称_解决Qt应用程序添加icon图标，修改窗口图标以及添加系统托盘问题...
一.Qt应用程序添加icon图标的方法: 首先,我们需要先准备两个文件,一个是icon图标,另一个是rc文件,我分别命名为"myApp.rc"和"soft.ico&quo ...
Element-Ui组件（二）Icon 图标
Element-Ui组件(二)Icon 图标本文参考Element官方文档: http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰 ...
iview表格表头上添加icon图标
需求描述: 如图,在表格表头处添加icon图标,并且鼠标悬浮时有提示语. 解决方案: 使用iview表格中自带的 renderHeader 函数,其用法和 render 类似, 代码: <tem ...
el-table表格某列添加icon图标
el-table表格某列添加icon图标和可编辑输入框 <el-tablekey="one"style="border-collapse: collapse;min ...
layui 给table里面的添加图标_layui怎么添加icon图标？
layui怎么添加icon图标?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(icon ...
cocos2dx win32版本添加icon图标
1. 在视图资源project.rc文件中添加icon图标 2. 在main.cpp文件的_tWinMain函数里添加如下代码 #if (CC_TARGET_PLATFORM == CC_PLATFO ...
【ElementUI组件优化】自定义icon图标的使用
风雨里做个大人,阳光下做个小孩. 前端经常会用到UI提供的各种图表,推荐阿里的图标库.如果UI要求不是很严格,我们可以自己在图标库中找到想要的图标. 搜索之后可以点击下载. 在ElementUI中使用 ...
HTML如何给网页添加icon图标？
一般的网站都有自己的图标(标签页左上角的小图标),如图: 如何添加ico图标? 非常简单,只需要在中添加如下代码: <link rel="Shortcut Icon" hre ...

ElementUI：tree给节点添加icon图标

基本的树代码

在树代码中间，增加span标签，通过:class绑定icon，通过label绑定树的名称

在data数据中，给每个对象绑定icon，值为需要的icon图标

运行结果：

ElementUI：tree给节点添加icon图标相关推荐

最新文章

热门文章