ElementUI框架中el-tree左侧小三角修改自定义图标

最新推荐文章于 2024-10-10 18:09:50 发布

前端大斗师

最新推荐文章于 2024-10-10 18:09:50 发布

阅读量6k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： web前端 element JavaScript 文章标签： vue.js javascript 文件上传

本文链接：https://blog.csdn.net/Web_chicken/article/details/121486272

web前端同时被 3 个专栏收录

79 篇文章

订阅专栏

JavaScript

64 篇文章

订阅专栏

element

6 篇文章

订阅专栏

本文介绍了如何在ElementUI的el-tree组件中修改左侧小三角图标，包括禁止旋转、有子节点未展开、有子节点已展开和无子节点四种状态的图标自定义方法，通过CSS样式穿透实现图标替换。

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

ElementUI框架中el-tree左侧小三角修改自定义图标

一、先看下效果图

在这里插入图片描述

二、css样式

注意，样式放在scope里不生效，如果必要请加上/deep/样式穿透

// 禁止旋转
.el-tree .el-tree-node__expand-icon.expanded{
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
//有子节点 且未展开
.el-tree .el-icon-caret-right:before{
    //这里是你需要修改的图标路径
  background: url("../../assets/img/shouqi.png") no-repeat 0 0;
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  font-size: 14px;
  background-size: 14px;
}
//有子节点 且已展开
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
  background: url("../../assets/img/zhankai.png") no-repeat 0 0;
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  font-size: 14px;
  background-size: 14px;
}
// 无子节点
.el-tree .el-tree-node__expand-icon.is-leaf::before{
    background: none;
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    font-size: 14px;
    background-size: 14px;
}