element之tree组件样式重写

最新推荐文章于 2024-10-09 09:37:04 发布

franklin_yuan

最新推荐文章于 2024-10-09 09:37:04 发布

阅读量793

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xin_yun_Jian/article/details/103620481

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
  }