element之tree组件样式重写

最新推荐文章于 2025-06-24 15:09:32 发布

原创最新推荐文章于 2025-06-24 15:09:32 发布 · 811 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用Element UI的树形组件，并通过代码示例展示如何自定义样式及交互，包括背景色设置和图标替换，适用于前端开发人员学习和参考。

1.改写实现效果：

2.页面代码

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

3.样式

.el-tree {
    background: #fff;
  }
 
  .tree-com .el-icon-caret-right:before {
    content: "";
    display: inline-block;
    background: url('./right.jpg');
    background-size: 7px 14px;
    width: 7px;
    height: 14px;
  }
 
  .tree-com .is-leaf.el-icon-caret-right:before {
    background: none;
  }