Vue+elementUI Tree 树形控件美化| 手风琴 | 增加树上下间距 | 高亮显示当前节点 | 当前节点显示颜色 | 增加图标

本文通过示例展示了如何在Vue项目中使用Element UI的Tree组件进行美化,包括添加图标、调整树形控件的上下间距、实现当前节点高亮显示为红色,以及定制当前节点颜色。详细介绍了相关的HTML结构和CSS样式,以帮助开发者提升树形控件的视觉效果。
摘要由CSDN通过智能技术生成

 截图如下所示:

从图中可以看出, 相比较于element-ui原来的树,增加以下几个内容:

图标,   树上下间距,   当前节点显示红颜色.

Html

  <el-tree
      style="padding-bottom: 10px;"
      :data="data"
      :props="defaultProps"
      :highlight-current="highlight"
      :default-expand-all="expand"
      node-key="label"
      current-node-key="首页"
      accordion
      @node-click="handleNodeClick">

            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span :style="data.st
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张音乐

请我喝杯咖啡吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值