element UI el-tree 自定义 （改变字体颜色）

最新推荐文章于 2025-10-27 12:34:26 发布
原创 最新推荐文章于 2025-10-27 12:34:26 发布 · 8.9k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍如何在Element UI框架中使用树形组件，并通过自定义渲染函数实现不同类型的节点样式，包括销售类别、秒杀类别和普通类别，同时提供CSS样式代码用于颜色区分。

1.

<el-tree
  :data="data"
  :props="defaultProps"
  node-key="id"
  :default-expanded-keys="defaultExpanded"
  :render-content="renderContent"        ///////////注意这里
  @node-click="handleNodeClick"/>

 

 

2.

data:

defaultProps: {
  children: 'children',
  label: 'name'
},

methods:

//   判断 type     选择自己想要的样式   

renderContent(h, { node, data, store }) {
  return(<span class={data.type == 1?'selling-category':(data.type == 2?'seckill-category':'common-category')} style="font-size:14px;cursor:pointer">{node.label}</span>)
},

注意：renderContent中需要使用 jsx 语法

https://blog.youkuaiyun.com/weixin_33911824/article/details/93575421

3.

css:

.selling-category{
  color:#7195FA;
}
.seckill-category{
  color:#D874FA;
}
.common-category{
  color:#FC5D5D
}
Vue项目里设置el-tree默认选中的背景色和字体色以及鼠标悬停的背景色
qq_37635012的博客
02-13 8029
【代码】Vue项目里设置el-tree默认选中的背景色和字体色。
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
Element UI是一个基于Vue 2.0的桌面端组件库，其中el-tree组件用于构建树形控件，而render函数则是一个允许开发者使用JavaScript代码直接生成虚拟DOM的方式。本文着重讲解了如何在el-tree组件中利用render函数动态...
修改el-tree左侧默认图标、文字颜色以及选中背景颜色
ge_lee的博客
06-27 1556
修改el-tree左侧图标，文字颜色以及选中背景颜色。
el-tree点击时改变字体颜色+根据返回数据改变字体颜色
asteriaV的博客
04-29 2187
1.点击时字体为蓝色，state=1 过滤返回数据：state=0为灰色，state=1颜色正常 2.html <el-tree ref="tree" class="filter-tree check" :class="isCheck=='1'?'start':''" :data="data" default-expand-all node-key="id" :filter-node-method="filterNode" :props="default.
ElementUI：el-tree功能及样式修改
最新发布
weixin_43394282的博客
10-27 233
本文介绍了在Vue.js中使用:deep伪类穿透scoped CSS修改Element Plus组件样式的技巧。主要包括两部分内容：1）通过:deep(.el-tree)修改树组件整体背景色和文字颜色；2）使用:deep(.el-tree-node__content:hover)设置鼠标悬停时行的背景色和文字颜色。两种方式都使用了!important来确保样式优先级，并配合截图展示了实际效果。这些方法适用于需要自定义第三方组件内部样式的开发场景。
element plus中tree组件选中、悬停背景颜色和字体颜色设置
qq_57229245的博客
03-11 2821
如果项目中使用了scss、less，以上代码可能不生效，遇到这种情况则需要再加一个<style>标签来写这部分css样式。
JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果
2201_75604580的博客
04-14 806
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
el-tree点击的节点文字设置颜色
weixin_47156901的博客
09-28 4411
vue 给el-tree点击的节点文字设置颜色解决步骤 el-tree 默认点击节点不会有什么样式，看起来很丑而且体验效果有点差 解决步骤 1.直接在.vue页面里面加一下样式 <style scope> .el-tree-node:focus>.el-tree-node__content{ background-color: #fff;//节点的背景颜色 color: #409eff;//节点的字体颜色 } </style> 注意：如果不起作用，可以试着把scope
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
Element-ui的el-tree组件是Vue.js开发中常用的一个树形控件，它提供了丰富的功能，如懒加载、自定义增删改以及局部刷新等。在本文中，我们将深入探讨如何利用这些特性来实现一个功能完善的树形控件。 首先，让我们...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
有时候，尽管数据源已经正确地更新，但`el-tree`视图并未改变，这可能是因为Element-ui的版本过低。如描述中提到，作者遇到的问题在升级到2.4.11及以上版本后得到解决。确保你的Element-ui版本是最新的，可以通过...
element el-tree 树图颜色配置
guagxi的博客
06-28 2958
/* 设置树形最外层的背景颜色和字体颜色 */ .el-tree { color: #fff; background: transparent; } /* 设置三角形图标的颜色 */ .el-tree-node__expand-icon { color: #fff; } /* 设置节点鼠标悬浮三角图标鼠标悬浮的颜色 */ .el-tree-node__content:hover .el-tree-node__expand-icon { color: #000; } /* .el-tre.
2024年Web前端最全vue中watch与防抖动函数使用冲突问题解决，安卓前端开发
2301_82243710的博客
05-04 883
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
vue elementUI el-tree的样式,修改鼠标点击时点击后的颜色
m0_52775179的博客
05-09 2537
【代码】vue elementUI el-tree的样式,修改鼠标点击时点击后的颜色。
vue element-ui tree组件，根据不同的状态显示不同的字体颜色添加自定义图标或者图片
m0_51551000的博客
03-20 1214
vue element-ui tree组件，根据不同的状态显示不同的字体颜色添加自定义图标或者图片
vue element tree组件，根据不同的状态显示不同的字体颜色
qq_41437844的博客
08-25 3859
HTML <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :render-content="renderContent" :highlight-current="true" ></el-tree> data 把带status为1的颜色变为红色，其余的变为绿色 data: [ {
el-tree内字体样式自定义
银河刨冰的博客
04-22 9101
使用了el-tree最基本的样式后，发现el-tree的样式有些简单。所以打算自己来对样式进行一些微调，首先在浏览器中找到了el-tree当中文字所在的那一层如下： 那么只要在.el-tree-node__label中进行样式的修改是不是就可以实现el-tree字体样式的自定义呢？直接在浏览器的调试器中进行修改。由下图对比可见，修改前后字体样式发生了变化。 那么接下来到代码中加入以下代码： ....
el-tree 实现点击子节点父节点也高亮
qq_36406553的博客
06-20 1327
【代码】el-tree 实现点击子节点父节点也高亮。
css el-tree鼠标经过、选中颜色
weixin_45890414的博客
09-30 1166
.el-tree-node:focus > .el-tree-node__content { background-color: pink !important; } .el-tree-node__content:hover { background-color: #66b1ff87; }
Element Plus中el-tree点击的节点字体变色加粗
BillKu的博客
02-27 632
node-click="onTreeNodeClick" 事件。el-tree标签设置。
element ui el-tree 前面的图标 自定义 加号和减号
09-02
<think> 我们参考用户提供的引用内容，总结出在Element UI的el-tree组件中自定义图标为加号和减号的方法主要涉及两个方面： 1. 使用插槽（slot）自定义图标内容，根据节点状态（是否展开、是否有子节点）动态切换图标。 2. 隐藏组件自带的展开箭头（通常通过CSS设置隐藏）。 具体步骤： 步骤1：在el-tree组件中使用名为“default”的插槽（在Vue中通常使用作用域插槽）自定义图标。 步骤2：在插槽中，通过判断节点的属性（如expanded和是否有子节点）来决定显示加号还是减号图标。 步骤3：通过CSS隐藏组件自带的展开箭头（避免出现两个图标）。 以下是具体实现： 1. 模板部分（使用作用域插槽）： ```vue <el-tree :data="data" :props="defaultProps" :expand-on-click-node="false"> <!-- 使用作用域插槽自定义节点内容 --> <span slot-scope="{ node, data }" class="custom-tree-node"> <!-- 自定义图标：根据节点状态显示加号或减号 --> <!-- 注意：如果节点没有子节点，则不需要显示加减号（或者显示为其他图标，如圆圈） --> <i v-if="node.childNodes.length === 0" class="el-icon-circle-close"></i> <i v-else :class="node.expanded ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline'"></i> <span>{{ node.label }}</span> </span> </el-tree> ``` 2. 样式部分（隐藏自带的展开箭头）： 在引用[2]和[3]中提到了隐藏自带箭头的方法，这里我们采用设置透明度为0的方法（同时保留其占位，避免影响布局）： ```css /* 隐藏自带的展开箭头 */ .el-tree-node__content > .el-tree-node__expand-icon { opacity: 0; position: absolute; /* 绝对定位，使其脱离文档流，避免占用空间 */ } .el-tree-node__content { position: relative; /* 为绝对定位的子元素提供相对定位 */ } ``` 3. 注意：由于我们隐藏了自带的展开箭头，但是自定义图标并没有点击展开/折叠的功能，所以需要将点击事件绑定到自定义图标上？实际上，el-tree的节点点击区域是整个节点（包括图标和文字）。但是，我们自定义的图标并没有触发展开/折叠，因为隐藏的原生箭头仍然在节点内容区域内（虽然透明，但占据位置），所以点击原来的位置仍然有效。 但是，如果我们希望点击自定义图标也能触发展开/折叠，我们可以给自定义图标添加点击事件，并调用node的展开折叠方法。例如： ```vue <i v-else :class="node.expanded ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline'" @click="toggleExpand(node)"> </i> ``` 在方法中： ```javascript methods: { toggleExpand(node) { node.expanded = !node.expanded; } } ``` 然而，需要注意的是，el-tree的节点展开状态是由节点自身的expanded属性控制的，并且tree组件内部会监听这个属性。但是，直接修改可能不会触发视图更新，所以更推荐使用tree组件的setExpanded方法（需要获取tree实例）或者通过触发节点点击事件。 但是，考虑到el-tree本身的设计，点击整个节点（包括图标和文字）都会触发切换，所以如果我们只是自定义图标样式，隐藏了自带箭头，那么点击位置实际上还是覆盖在自定义图标上（因为原箭头是绝对定位覆盖在自定义图标的位置上）。因此，我们可以通过调整CSS，让原箭头的区域覆盖整个节点内容区域，或者将原箭头的点击区域扩大到整个节点（实际上默认就是整个节点触发）。所以，如果我们只是隐藏了箭头，但保留了它的位置（通过绝对定位覆盖在自定义图标上），那么点击自定义图标的位置实际上会触发原箭头的点击事件（因为它在上面）。这样，我们就不需要额外绑定事件。 但是，如果隐藏箭头后，点击自定义图标的位置没有触发展开折叠，可能是因为原箭头虽然透明，但被自定义图标遮挡了（因为绝对定位的层级关系）。所以，我们需要确保原箭头的层级在自定义图标之下（或者不遮挡），但我们隐藏了它，所以点击事件应该由节点内容捕获。 实际上，更简单的方法是不使用绝对定位隐藏原箭头，而是直接通过设置`display: none`，但这样会失去占位，所以我们可以设置原箭头宽度为0，然后通过调整自定义图标的样式来占据原来箭头的位置。 引用[3]提供了一种方法：通过设置原箭头的宽度为0，然后自定义图标使用背景图片，并且通过伪元素来设置。但这里我们使用字体图标，所以可以调整原箭头的宽度为0，然后自定义图标设置margin-left调整位置。 因此，另一种隐藏原箭头的方法（不占用空间）： ```css .el-tree-node__content > .el-tree-node__expand-icon { display: none; } ``` 然后，在自定义图标的元素上，我们需要手动添加左边距来模拟原箭头的缩进（因为原箭头隐藏后，自定义图标需要占据原位置）： ```vue <i v-if="node.childNodes.length === 0" class="el-icon-circle-close" style="margin-left: 16px;"></i> <i v-else :class="node.expanded ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline'" style="margin-left: 16px;"></i> ``` 但是，这样就需要为不同层级的节点设置不同的缩进（因为树形结构有层级缩进）。实际上，el-tree的层级缩进是由`el-tree-node__content`的padding-left实现的，而原箭头是放在这个padding-left区域内的。所以隐藏原箭头后，我们自定义的图标需要放在原箭头的位置（即padding-left区域内）。因此，我们可以将自定义图标设置为绝对定位，并调整位置到最左边。 综合以上，我们采用以下方案： 1. 隐藏原箭头（使用`display:none`） 2. 在自定义节点内容时，将自定义图标绝对定位到原箭头的位置（通过调整left值）。 调整CSS： ```css .custom-tree-node { position: relative; padding-left: 16px; /* 留出原箭头的位置 */ } .custom-tree-node > i:first-child { position: absolute; left: -16px; /* 将图标移动到原箭头的位置 */ } ``` 这样，自定义图标就会显示在原箭头的位置，并且点击节点任何地方（包括自定义图标）都会触发展开/折叠，因为节点点击事件绑定在整个`.el-tree-node__content`上。 但是，我们需要注意，如果节点有嵌套层级，每一层都会有一个原箭头，每个原箭头的位置都是通过`padding-left`逐级增加的。所以我们不能简单地将自定义图标固定向左移动16px，而应该根据节点的层级动态调整？实际上，el-tree已经通过`padding-left`实现了层级缩进，我们只需要在原箭头的位置（即每一层级的最开始16px区域内）放置我们的自定义图标。所以，我们只需要将自定义图标绝对定位到该节点的`.el-tree-node__content`的最左侧（即当前层级缩进区域的开始位置）。 因此，修改后的CSS： ```css /* 隐藏原箭头 */ .el-tree-node__expand-icon { display: none; } /* 自定义节点内容容器，需要相对定位以便于绝对定位图标 */ .custom-tree-node { position: relative; flex: 1; /* 确保宽度填满 */ } /* 自定义图标：绝对定位到左侧，距离左侧0，但原箭头的位置是在每个节点的内容区域的左侧，而节点内容区域已经通过padding-left缩进 */ /* 因此，我们的图标需要放在该节点内容区域的padding-left区域内 */ .custom-tree-node > i:first-child { position: absolute; left: -16px; /* 因为原箭头宽度一般是16px，所以向左移动16px，这样图标就会出现在原箭头的位置 */ } ``` 但是，这样设置后，第一层节点的自定义图标会向左超出16px，而第二层节点因为缩进了16px（假设每层缩进16px），所以图标的位置在第二层节点的左侧16px处，实际上是在第一层节点的内容区域内。所以我们需要根据层级动态调整？实际上，不需要，因为每一层节点的内容区域（.el-tree-node__content）的padding-left都是相对于父节点增加的，而我们的自定义图标是相对于当前节点内容区域的左侧绝对定位的（即相对于当前节点的padding-left的起始位置）。所以，我们只需要将图标向左移动16px，就可以覆盖在该节点原箭头的位置（原箭头也是在该节点的padding-left区域内显示的）。 注意：每一层节点的缩进是由`.el-tree-node`的`padding-left`实现的，而我们自定义的图标放在`.custom-tree-node`内，它本身在`.el-tree-node__content`内（这个元素没有缩进，缩进是在其父元素上设置的）。所以，我们只需要向左移动16px，就能够覆盖在当前节点原箭头的位置（因为原箭头也是相对于当前节点内容区域定位的）。 但是，这种方法需要确保每一层的缩进都是16px（Element UI默认是16px）。如果缩进值改变，需要相应调整。 综上所述，我们给出完整的代码示例： 模板部分： ```vue <template> <el-tree :data="data" :props="defaultProps" :expand-on-click-node="false" node-key="id" > <!-- 使用作用域插槽 --> <span slot-scope="{ node, data }" class="custom-tree-node"> <!-- 自定义图标：根据节点状态显示加号或减号 --> <!-- 注意：我们使用node.childNodes.length判断是否有子节点（或者使用node.data.children，根据数据结构） --> <!-- 这里假设数据结构中，叶子节点没有children属性或children为空数组 --> <i v-if="!node.childNodes || node.childNodes.length === 0" class="el-icon-circle-close"></i> <i v-else :class="node.expanded ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline'"></i> <span>{{ node.label }}</span> </span> </el-tree> </template> ``` 样式部分（在style标签内，注意使用scoped或全局）： ```css /* 隐藏原箭头 */ .el-tree-node__expand-icon { display: none; } /* 自定义节点样式 */ .custom-tree-node { position: relative; /* 留出原箭头的位置，因为隐藏了原箭头，所以这里不需要额外留空间，但原箭头位置在padding-left区域内，我们通过绝对定位把图标放过去 */ /* 不需要设置padding-left，因为el-tree-node__content已经有padding-left了 */ } .custom-tree-node > i:first-child { position: absolute; left: -16px; /* 向左移动到原箭头的位置 */ top: 50%; transform: translateY(-50%); /* 垂直居中 */ } ``` 这样，就实现了将图标自定义为加号和减号，并且隐藏了原箭头，同时保证了点击节点（包括图标区域）能够展开/折叠。 注意：如果树形结构的数据中，非叶子节点即使没有子节点（比如动态加载的情况下，初始时children为空），那么可能无法显示加减号。因此，可能需要根据实际情况调整判断条件。例如，如果某个节点是叶子节点（isLeaf属性），则显示无加减号（或另一种图标），否则根据展开状态显示加减号。 另外，关于引用[4]中提到的展开/折叠全部节点的方法，用户也可以参考，但此处主要需求是自定义图标，故不展开。 最后，生成相关问题： </think> 在 Element UI 的 el-tree 组件中，将节点图标自定义为加号（展开前）和减号（展开后）的实现方法如下，综合参考了站内多个解决方案： ### 完整实现步骤 1. **使用作用域插槽自定义图标** ```vue <el-tree :data="data"> <template #default="{ node, data }"> <!-- 判断节点类型 --> <i v-if="node.isLeaf" class="el-icon-circle-close" /> <!-- 叶子节点图标 --> <i v-else :class="node.expanded ? 'el-icon-remove' : 'el-icon-circle-plus'" /> <!-- 非叶子节点动态图标 --> <span>{{ node.label }}</span> </template> </el-tree> ``` - `node.expanded` 属性控制展开状态（true=展开，false=折叠）[^1] - 叶子节点使用固定图标（如 `el-icon-circle-close`） - 非叶子节点根据状态切换 `el-icon-circle-plus`（加号）和 `el-icon-remove`（减号） 2. **隐藏组件自带箭头 (关键步骤)** ```css /* 隐藏原生箭头 */ .el-tree-node__content > .el-tree-node__expand-icon { display: none; /* 或 opacity:0 保留占位 */ } ``` 使用 `opacity:0` 可保留点击区域，使用 `display:none` 则完全移除[^2] 3. **添加展开/折叠动画 (可选)** ```css .el-tree-node__expand-icon { transition: transform 0.3s; /* 旋转动画 */ } .el-tree-node__expand-icon.expanded { transform: rotate(0deg); /* 禁用旋转效果 */ } ``` ### 完整代码示例 ```vue <template> <el-tree :data="treeData" node-key="id"> <template #default="{ node, data }"> <!-- 动态切换加减号 --> <i v-if="node.childNodes.length > 0" :class="node.expanded ? 'el-icon-remove' : 'el-icon-circle-plus'" style="margin-right:5px" /> <span>{{ node.label }}</span> </template> </el-tree> </template> <style scoped> /* 隐藏原生箭头 */ :deep(.el-tree-node__content > .el-tree-node__expand-icon) { opacity: 0; width: 0; } </style> ``` ### 注意事项 1. **图标选择建议**： - 加号图标：`el-icon-circle-plus` / `el-icon-plus` - 减号图标：`el-icon-remove` / `el-icon-minus` - 可在 [Element UI 图标库](https://element.eleme.cn/#/zh-CN/component/icon) 选择合适图标 2. **动态加载的特殊处理**： ```vue <i v-if="data.children && data.children.length > 0" ... /> ``` 未加载子节点时需判断 `hasChildren` 属性 3. **点击事件穿透**： 隐藏原生箭头时需确保自定义图标能触发 `expand-change` 事件，可添加： ```css .el-tree-node__content { position: relative /* 保证点击区域正确 */ [^2] } ``` ### 扩展功能 实现全局展开/折叠控制按钮： ```vue <el-button @click="toggleExpandAll">展开/收起</el-button> <script> export default { methods: { toggleExpandAll() { const nodes = this.$refs.tree.store._getAllNodes(); nodes.forEach(node => node.expanded = !this.isExpandAll); this.isExpandAll = !this.isExpandAll; } }, data() { return { isExpandAll: false } } } </script> ``` **注意**：需在 `<el-tree>` 设置 `node-key` 属性[^4]
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值