element UI tree 组件 自定义

element-UI tree 组件 修改前面的自定义图标

HTML

<el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick" :highlight-current="false">
  <span class="custom-tree-node" slot-scope="{ node, data }">
       <!-- <i v-if="data.children&&data.children.length>0" class="iconfont icon-wendang"></i> -->
       <i v-if="!data.children" class="iconfont icon-shexiangtou"></i>
       <span>{{ node.label}}</span>
   </span>
</el-tree>

css

 .el-tree{
	 background-color: transparent;
	 /deep/.el-tree-node {
	     .el-tree-node__content{
	         &:hover {
	            background-color: rgba(0, 71, 73, .6);
	        }
	        height: 150px!important;
	        .el-tree-node__expand-icon{
	            font-size: 80px!important;
	            color: #fff;
	        }
	        .el-tree-node__expand-icon.is-leaf{
	            font-size: 0!important;
	        }
	    }
	 }
	    /deep/.el-tree-node:focus > .el-tree-node__content {
	    background-color: rgba(0, 71, 73, .6);
	    }
	    .custom-tree-node{
	        color: #fff;
	        .iconfont{
	            font-size: 100px;
	            color: aqua;
	        }
	    }
	    
	}

实现的效果

在这里插入图片描述