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

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

 

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

 

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

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

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

相关文章:

  • 2021-11-27
  • 2022-12-23
  • 2021-11-28
  • 2022-12-23
  • 2022-01-10
  • 2021-09-20
  • 2022-12-23
  • 2021-07-10
猜你喜欢
  • 2022-12-23
  • 2021-04-10
  • 2021-11-29
  • 2022-12-23
  • 2021-05-04
  • 2021-12-27
  • 2021-05-21
相关资源
相似解决方案