Vue ElementUI el-tree 背景透明且重置hover等默认样式

最新推荐文章于 2025-08-12 23:15:05 发布

原创最新推荐文章于 2025-08-12 23:15:05 发布 · 3.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #tree

《ElementUI 基础知识》专栏收录该内容

36 篇文章

订阅专栏

本文介绍了如何在Vue Element UI的el-tree组件中实现背景透明，并覆盖全局颜色，包括checkbox样式和节点 hover/focus 时的背景改变。通过Stylus预处理器，展示了如何在 scoped 样式中进行高效修改。

需求：el-tree 背景透明，使用父元素的颜色。

一、原始样式

二、修改后

注意：这里是全局，<style scoped>无效。如果只对某个tree改样式，可加前缀。下述的示例使用预处理 stylus。

// 这里没有 scoped
<style lang="stylus">
.el-tree{
    color: #FFFFFF;// 白色字体
    background: rgba(0,0,0,0);// 整体背景透明
    .el-checkbox__inner{
        background:rgba(0,0,0,0);// checkbox 背景透明
    }
    .el-tree-node__content:hover {
        background: rgba(104,147,215,0.4);// hover 节点背景色，否则是白色
    }
    .el-tree-node:focus>.el-tree-node__content {
        background-color: rgba(0,0,0,0); // focus 节点背景透明，否则是白色
    }
}
</style>

注意：学到了新方式，可直接在 scoped 中修改 el-tree 样式。使用 >>> ，可参考此文 《Vue ElementUI el-tree 修改原始父节点收缩 icon》