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>