Element-UI实现Tree 树形控件节点添加图标：
属于自定义节点内容，可以通过两种方法进行树节点内容的自定义：render-content 和 scoped slot。
1、scoped slot实现在节点区添加图标
传入两个参数 node 和 data ， 分别表示当前节点的 Node 对象和当前节点的数据
<template><div><el-tree :data="data" :props="defaultProps" default-expand-all><span slot-scope="{ node, data }"><i :class="data.icon"></i><span style="padding-left: 4px;">{{node.label}}</span></span></el-tree></div></template><script>var menus = [{'menuId': 1,'menuName': '系统管理','icon': 'el-icon-menu','children': [{'menuId': 100,'menuName': '用户管理','icon': 'el-icon-menu','children': [{'menuId': 1000,'menuName': '用户查询','icon': 'el-icon-document'},{'menuId': 1001,'menuName': '用户新增','icon': 'el-icon-document'},{'menuId': 1002,'menuName': '用户修改','icon': 'el-icon-document'},{'menuId': 1003,'menuName': '用户删除','icon': 'el-icon-document'}]},{'menuId': 101,'menuName': '角色管理','icon': 'el-icon-menu','children': [{'menuId': 1006,'menuName': '角色查询','icon': 'el-icon-document'},{'menuId': 1007,'menuName': '角色新增','icon': 'el-icon-document'},{'menuId': 1008,'menuName': '角色修改','icon': 'el-icon-document'},{'menuId': 1011,'menuName': '删除角色','icon': 'el-icon-document'}]}]}];export default {name: 'tree',data () {return {data: menus,defaultProps: {children: 'children',label: 'menuName'}};},methods: {}};</script><style scoped></style>
2、render-content 实现在节点区添加图标
<template><div><el-tree :data="data" :props="defaultProps" default-expand-all:render-content="renderContent"></el-tree></div></template><script>var menus = [{'menuId': 1,'menuName': '系统管理','icon': 'el-icon-menu','children': [{'menuId': 100,'menuName': '用户管理','icon': 'el-icon-menu','children': [{'menuId': 1000,'menuName': '用户查询','icon': 'el-icon-document'},{'menuId': 1001,'menuName': '用户新增','icon': 'el-icon-document'},{'menuId': 1002,'menuName': '用户修改','icon': 'el-icon-document'},{'menuId': 1003,'menuName': '用户删除','icon': 'el-icon-document'}]},{'menuId': 101,'menuName': '角色管理','icon': 'el-icon-menu','children': [{'menuId': 1006,'menuName': '角色查询','icon': 'el-icon-document'},{'menuId': 1007,'menuName': '角色新增','icon': 'el-icon-document'},{'menuId': 1008,'menuName': '角色修改','icon': 'el-icon-document'},{'menuId': 1011,'menuName': '删除角色','icon': 'el-icon-document'}]}]}];export default {name: 'tree',data () {return {data: menus,defaultProps: {children: 'children',label: 'menuName'}};},methods: {renderContent: function (h, {node, data, store}) {return (<span><i class={data.icon}></i><span style="padding-left: 4px;">{node.label}</span></span>);}}};</script><style scoped></style>
