Element-UI实现Tree 树形控件节点添加图标

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>