element-ui的el-tree自定义图标

根据公司项目的要求，自定义树的图标以及点击时，可以根据子级的关闭，切换图标。效果如下：

经过查询多方资料，得出结论还是比较简单的，代码如下：

<el-tree
    :data="deptOptions"
    :props="defaultProps"
    :expand-on-click-node="false"
    :filter-node-method="filterNode"
    :title="label"
    node-key="id"
    :default-expanded-keys="defaultDeptOptionsKeys"
    ref="tree"
    @node-collapse="nodeCollapse"
    @node-expand="nodeExpand"
    @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <svg-icon v-if="!data.children" icon-class="file" class="svgIcon"/>
            <svg-icon v-else-if="node.expanded" icon-class="floder_open" class="svgIcon"/>
            <svg-icon v-else icon-class="floder_close" class="svgIcon"/>
            <span class='fontSize14' :title='node.label || "-"'>{{node.label}}</span>
        </span>
</el-tree>

其中，svg-icon是我写的一个组件，可以直接使用svg格式图标的。也不需要打包成字体图标库。也可以调整字体，同时，也是矢量图。

说明：svg在阿里图标库中下载的时候，一定要“批量去色”，不然，调整图标颜色得时候，会出现你得不到的效果。