element el-tree配合阿里矢量图的使用

1、指定渲染函数:render-content=“renderContent”

<el-tree ref="tree" :data="functionData" :props="props" accordion :default-checked-keys="selectFunction" show-checkbox node-key="id" :render-content="renderContent"></el-tree>

2、根据自己需要配置选项（根据后端返回的字段可相应配置）

props: {
children: 'children',
label: 'name'
}

3、实现渲染函数（方式一 ）render-content

renderContent (h, { node, data, store }) {
	 return (
	<span>
	   		 <i class={data.icon}></i>
	    	<span> {node.label}</span>
		</span>
	)
}

4、数据源格式

"treeData": [
  { 
  　 "id": 1,
　　"name": "group",
　　"icon": "el-icon-menu",		//后端相应返回你的阿里上面的class类名之类的，这只是举例
　　"children": []
  }]

方式二 使用 scoped slot 此处我用的阿里的svg支持多色图标（我使用的是这个，方式一自己技术拙劣，没整出来 ）

<el-tree
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
      	<svg class="icon svg-icon" aria-hidden="true">
      		//此处划重点当时纠结了好一会   
            <use :xlink:href='"#"+data.className'></use> 			
          </svg>
        <span>{{ node.label }}</span>
      </span>
    </el-tree>

阿里图标的使用就不做详细的阐述了，有疑问的话直接参考以下链接，再配合上面的方式使用，大功告成！
https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.16&helptype=code