element plus中tree组件选中、悬停背景颜色和字体颜色设置

最新推荐文章于 2025-07-07 17:17:45 发布

章若楠圈外男友

最新推荐文章于 2025-07-07 17:17:45 发布

阅读量2.6k

点赞数 4

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript html5 css

本文链接：https://blog.csdn.net/qq_57229245/article/details/136614385

本文介绍了在Vue项目中如何使用ElementUI的el-tree组件，并详细说明了不同状态下的CSS样式设置，特别提到了当使用SCSS或LESS时可能出现的兼容性问题及解决方法。

页面结构：

<el-tree 
    style="max-width: 600px" 
    :data="data" 
    :props="defaultProps" 
    @node-click="handleNodeClick"
    node-key="id" 
    highlight-current />

css设置：

/* 鼠标浮动过的背景颜色 */
.el-tree-node__content:hover {
  background: #0074b7;
}
/* 鼠标点击时节点的背景颜色 */
.el-tree-node:focus>.el-tree-node__content {
  background-color: #0074b7 !important;
  color: rgb(255, 255, 255);
}
/* 鼠标失去焦点时节点背景的颜色 */
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background: rgb(0, 129, 204);
}

需要注意的是： 如果项目中使用了scss、less，以上代码可能不生效，遇到这种情况则需要再加一个<style>标签来写这部分css样式。