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

最新推荐文章于 2024-06-27 17:52:11 发布

置顶张音乐

最新推荐文章于 2024-06-27 17:52:11 发布

阅读量5.2k

点赞数 1

分类专栏： JS | Vue | React | 前端踩坑实战教程文章标签： Vue element-ui 树形控件美化

本文链接：https://blog.csdn.net/qq_29777207/article/details/118577021

版权

JS | Vue | React | 前端踩坑实战教程专栏收录该内容

32 篇文章 131 订阅 ¥29.90 ¥99.00

订阅专栏

本文通过示例展示了如何在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

了解本专栏