el-tree的样式重写分享拓展

在element-ui组件有多种风格的树形组件：如节点单选、多选、手风琴等类型。这边举例一个手风琴风格的组件：

 

可是这样的样式有点丑，而且点击选中的背景样式是靠focus触发的，点击其他地方背景选中样式会消失。现在将我们先看看怎么重写样式：

 

从官方api里面可以看到render-content方法。就是对树节点渲染的方法，

那这时候我们可以对这个方法重写：

 

我们先给节点加图标，字体风格也可以预留留个class设置实现方式如下：

 

接下来，看一下选中的背景样式，focus前后有什么变化：

 

被选中的节点里面会多一个is-current属性：这时候那我们修改一下tree的样式

 

这时候的tree的模样长这样了：

 

再接下来拓展一下，增加单选多选功能、搜索功能成品如下图：是不是比原生的好看多了。