elementUI tree 添加elementUI图标库图标（Vue项目）

效果如图：

图标来源：elementUI图标库  

地址：https://element.eleme.cn/#/zh-CN/component/icon

如图：

思路：1、div中插入el-tree

           2、el-tree中插入<span> 文本容器并使用作用域插槽slot-scope

           3、在作用域插槽下的文本标签<i>设置动态类，并从data数据中获取图标类。

HTML代码：

<div class="bottom">
        <el-tree :data="videoArr" ref="tree" :props="defaultProps" 
                 default-expand-all node-key="id" show-checkbox 
                 check-on-click-node>
                 <span  slot-scope="{ node, data }">
                 <!-- 使用作用域插槽，插入图标-->
                       <span>
                            <i :class="data.icon"></i>  {{ node.label }}
                            <!-- :class 动态获取data中的icon数据，并作为其class类-->
                       </span>              
                 </span>
        </el-tree>
</div>

 script代码：

<script>
export default {
        data(){
            return{
                defaultProps: {
                  children: 'children',
                  label: 'name'
                },
                videoArr:[
					{
						icon: "el-icon-video-camera" //根节点图标类
						id: 84
						name: "越西录像机"
						children: [
						{
							icon: "el-icon-video-camera-solid" //叶子节点图标类，以下同理
							id: 551
							name: "大棚球机"
						}
						{
							icon: "el-icon-video-camera-solid"
							id: 552
							name: "左围墙2球机"
						}
						{
							icon: "el-icon-video-camera-solid"
							id: 553
							name: "大门口球机"
						}
						]
                         //数据太多暂取前三个
					}
			
					{
						icon: "el-icon-video-camera"
						id: 94
						name: "越西下园区"
						children: [
						{
							icon: "el-icon-video-camera-solid"
							id: 561
							name: "大门口"
						}
						{
							icon: "el-icon-video-camera-solid"
							id: 562
							name: "道路第二转角处"
						}
						{
							icon: "el-icon-video-camera-solid"
							id: 563
							name: "水泥路第二转角"
						}
						]
                        //数据太多暂取前三个
					}
                ],   
            }
        },
</script>