实现自定义elementui的tree树形控件

因为一些业务的需要，在elementUI中的tree树形控件的icon和样式就显得捉襟见肘了，那么很多情况下

需要实现自定义的一些图标和样式进行开发。

下面直接上代码

首先在html中写入如下代码

 <el-tree :data="data"  icon-class="el-icon-plus
">
      <span class="custom-tree-node" slot-scope="{ node, data }" @click="demo(node)">
        <i v-if="node.level == 1" class="province" @click="demo(node)"/>
        <i v-else-if="node.level == 2" :class="node.childNodes.length==0?'xiang':'city'"  @click="demo(node)"/>
        <i v-else-if="node.level == 3" class="xiang"/>
        {{ data.label }}
      </span>
    </el-tree>
    以上代码中的点击事件demo是测试点击之后看node节点里面有哪些内容，可能某些童鞋对html中的node.level有点好奇不知道哪儿来的，这就测试一下打印如下
    
    

可以看到打印的这块主要有用的还是childNodes和level这两个字段。首先level为几代表的是几级，比如

上面的html中的代码中可以看到node。level为3，说明是一个三级树形结构。那么下面聊一下这个

childNodes这个东西，其实自己看发现他是一个数组，也就是说，他是数据他的一个孩子节点，比如数

据是一个二级或者三级的，那么当你点击一级栏目的时候他的数据的children里面有几个对象那么他就是

数组几个，使用场景比如说目录有些是课程目录，有些是一级下面直接三级，有些是一级里面有二级，

二级里面有三级这样嵌套，那么需要借助这个来展示不同的icon和样式，用node.childNodes.length==0

判断，如果等于0的时候那么他的肯定是最后一级目录，如果不等于0说明还有嵌套。然后根据他的level

来写不同的css样式 ，
css样式如下

这篇好文章是转载于：学新通技术网