在element-ui组件有多种风格的树形组件:如节点单选、多选、手风琴等类型。这边举例一个手风琴风格的组件:
可是这样的样式有点丑,而且点击选中的背景样式是靠focus触发的,点击其他地方背景选中样式会消失。现在将我们先看看怎么重写样式:
从官方api里面可以看到render-content方法。就是对树节点渲染的方法,
那这时候我们可以对这个方法重写:
我们先给节点加图标,字体风格也可以预留留个class设置实现方式如下:
接下来,看一下选中的背景样式,focus前后有什么变化:
被选中的节点里面会多一个is-current属性:这时候那我们修改一下tree的样式
这时候的tree的模样长这样了:
再接下来拓展一下,增加单选多选功能、搜索功能成品如下图:是不是比原生的好看多了。