1、指定渲染函数:render-content="renderContent"

<el-tree ref="tree" :data="functionData" :props="props" accordion :default-checked-keys="selectFunction" show-checkbox node-key="id" :render-content="renderContent"></el-tree>
2、根据自己需要配置选项
props: {
children: 'children',
label: 'name'
}
3、实现渲染函数
renderContent (h, { node, data, store }) {
return (
<span>
<i class={data.icon}></i>
<span> {node.label}</span>
</span>
)
}
4、数据源格式
"treeData": [
  { 
    "id": 1,
  "name": "group",
  "icon": "el-icon-menu",
  "children": []
  }]

element el-tree 添加图标的更多相关文章

  1. 在Linux(Luna)下向Launch启动器中添加图标

    记录下在Luna下向Launch中添加图标的步骤,以供以后参考,这里我以加入eclipse图标为例: 首先,我们来创建一个desktop文件(Luna中到启动器Launch可以看作是Ubuntu中到桌 ...

  2. 为网站文字前面添加图标 在线调用 Font Awesome 字体icon小图标 美化网站

    一.如何开始 1.将下面的代码复制粘贴到HTML页面面的 <head> 下面 <link rel="stylesheet" href="https:// ...

  3. Qt 程序和窗口添加图标

    Qt项目在打包发布之后都需要有个个性的程序图标和窗口图标,这样会使程序更加美观大方,下面我们分别来看如何给程序和窗口分别添加图标.我们需要两种格式的图片,一种是.ico的,用来给程序添加图标,一种是. ...

  4. iOS中为网站添加图标到主屏幕以及增加启动画面

    虽然没有能力开发Native App,但还是可以利用iOS中Safari浏览器的特性小小的折腾一下,做一个伪Web App满足下小小的虚荣心的. 既然是在iOS中的Safari折腾的,那么代码中利用到 ...

  5. ExtJS 添加图标icon

    extjs控件有两个属性:一个是iconCls:另一个是icon.通过这两个属性可以对控件添加图标 1.直接引用图标路径 icon: '../icons/application_view_detail ...

  6. Extended ComboBox添加图标

    Extended ComboBox添加图标 关键点 实现过程 // MFC02Dlg.h : header fileCImageList m_imageList;  // MFC02Dlg.cpp : ...

  7. Delph控制台(Console)程序添加图标和版权信息

    Delphi创建控制台(Console)程序默认是无法添加图标和版权的.经过仔细的对比窗体程序与控制台程序源码,发现窗体程序的工程文中,在uses结束begin开始的地方有一句如下代码:{$R *.r ...

  8. Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode

    Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...

  9. weex 学习: 添加图标(使用阿里吧吧-icon)

    添加图标(使用阿里吧吧-icon) <text slot="left" class="header-left"></text>   i ...

  10. _ZNote_Qt_添加图标方法

    简单来说就两步: 将icns图标添加入资源文件,例如picture.icns .pro文件中添加 (图标) ICON = picture.icns 程序中添加(程序窗口上显示) setWindowIc ...

随机推荐

  1. asp.net core Serilog的使用

    先贴上关于使用这个日志组件的一些使用方法,等有时间了在吧官方的文档翻译一下吧,现在真是没时间. Serilog在使用上主要分为两大块: 第一块是主库,包括Serilog以及Serilog.AspNet ...

  2. Electron桌面应用打包流程

    一. 准备工作 1.npm的安装需要下载node.js,安装完node.js之后npm自然会有. 参考链接:http://www.runoob.com/nodejs/nodejs-install-se ...

  3. 使用nginx部署网站

    前面的话 如果服务器只需要放置一个网站程序,解析网站到服务器的网站,网站程序监听80端口就可以了.如果服务器有很多应用,借助nginx不仅可以实现端口的代理,还可以实现负载均衡.本文将详细介绍前端及n ...

  4. css---遮罩层

    <div id="body"> 显示页面的全部内容 <div id="open">打开弹框</div> </div&g ...

  5. [OI]Noip 2018总结(普及)

    考砸了,还有原谅我代码十分有限的可读性. 一个人的真正伟大之处就在于他能够认识到自己的渺小.——保罗 从一年前初一九月到现在18年10月接触OI已经有一年了.几次模拟赛也自我感觉良好,都过了一等的线, ...

  6. windows 8.1 cmd命名提示符全屏

    在 C:\Users\wy\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\System Tools 目录下,右键命令提示符-属性中修改:

  7. BZOJ4552 HEOI2016/TJOI2016排序(线段树合并+线段树分裂)

    很久以前写过二分答案离线的做法,比较好理解.事实上这还是一个线段树合并+分裂的板子题,相比离线做法以更优的复杂度做了更多的事情.具体不说了.怎么交了一遍luogu上就跑第一了啊 #include< ...

  8. Windows启动过程(MBR引导过程分析)

    catalogue . 电脑启动过程 . MBR分析(master boot record) - 位于整个硬盘的 扇区 . DBR(DOS boot record) - 位于柱面0,磁头1,扇区1,即 ...

  9. 第十节:数据批注(DataAnnotationModel)和自定义验证(包括Model级别的验证)

    一. 简介 写完上一个章节MVC中的常用特性,迫不及待将该系列补全,该章节主要介绍数据批注(也叫:注解). 一听[数据批注],好高大上的名字,但仔细一看,它们其实是[System.ComponentM ...

  10. NSE: known a priori estimate

    1. Leray-Hopf $u\in L^\infty(0,T;L^2(\bbR^3))\cap L^2(0,T;H^1(\bbR^3))$. See [Leray, Jean. Sur le mo ...