ant design tree 不同类型节点使用不同图标和标题颜色

在使用ant design tree构建一个树结构时，需要根据节点的不同类型使用不同的图标和标题颜色，例如同一个树下面既有部门又有岗位，我想用颜色和图标来区分一下节点的类型，在网上查了很多资料也没找到解决方案，最后根据官方文档折腾了一天终于实现了。效果如下（黑色节点为部门，深绿色节点为岗位）：

 一、改图标

ant design tree 可以使用icon指定图标，但是指定的是树节点的所有图标，为了能够根据节点类型来加载不同图标，这里将icon设置为一个方法，在方法里面返回图标的类型，当然也可以使用插槽来解决，我这里没有采用插槽的方式。

（1）在a-tree中增加属性:icon="getIcon"

（2）在methods中定义getIcon的方法：

      getIcon(props) {
        if(props.type=="dept")
        {
           return <a-icon type="home" />;
        }
        else
        {
           return <a-icon type="team" style="color:#136030" />;
        }
      }

二、修改节点文字颜色

这个是通过插槽的方式来解决，代码如，代码如下：

      <template #title="item">
        <span v-if="item.type=='position'" style="color:#136030">{{item.title}}</span>
        <span v-else>{{item.title}}</span>
      </template>

完整代码：

<a-tree
      v-if="positionTree.length>0"
      selectable
      :showIcon="true"
      :icon="getIcon"
      :selectedKeys="selectedKeys"
      :checkStrictly="true"
      :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
      :treeData="positionTree"
      :expandAction="false"
      @select="onSelect"
      :load-data="loadTreeData"
      :defaultExpandedKeys="[positionTree[0].key]">
      <template #title="item">
        <span v-if="item.type=='position'" style="color:#136030">{{item.title}}</span>
        <span v-else>{{item.title}}</span>
      </template>
    </a-tree>