概要

在开发树形时，默认是没有图标的，比如菜单，资源分配时，选择起来不是很方便，如果有图标就会清晰很多。

实现办法

比如菜单授权界面

我们看到菜单 ，接口 ，按钮一目了然。

相关代码

 buildtree(list, permissions, parentId) {
      list.forEach(item => {
        if (item.parentId === parentId) {
          var child = {
            key: item.id,
            title: item.name,
            children: [],
            //增加此行代码，menuType 对应图标类型
            slots: { icon: item.menuType }
          }
          this.buildtree(list, child.children, item.id)
          permissions.push(child)
        }
      })
    },

树形控件代码

<a-tree checkable v-model="checkedKeys" @check="onCheck"
                :treeData="permissions"
                :checkStrictly="checkStrictly"
                showIcon
        >
            <a-icon slot="I" type="italic" />
            <a-icon slot="C" type="bars" />
            <a-icon slot="F" type="bold" />
</a-tree>

• 指定图标solt 和上面的 menuType相对应
• 树形增加 showIcon