el-tree 背景色

console.log('D')

已于 2024-04-19 16:44:17 修改

阅读量513

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2024-04-19 14:49:57 首次发布

本文链接：https://blog.csdn.net/i_am_father_for_/article/details/137964891

这篇文章详细描述了如何使用CSS定制ElementUI树组件的样式，包括节点展开时的图标旋转、激活状态下的背景色清空、鼠标选中的背景颜色以及hover效果。

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

 // 图标
        /deep/.el-tree-node__expand-icon {
            transform: rotate(90deg);
            &.expanded {
                transform: rotate(270deg);
            }
        }
        //展开激活时清空背景色
        /deep/ .el-tree-node:focus > .el-tree-node__content {
            background: #fff;
        }
        // 鼠标选中后色背景色
        /deep/ .el-tree-node.is-current > .el-tree-node__content {
            background: rgba(68, 185, 121, 0.1);
            border-radius: 4px;
            color: #44b979;
        }
        //hover
        /deep/.el-tree-node__content {
            height: 36px;
            padding: 8px;
            &:hover {
                background: #f8f8f8;
                border-radius: 4px;
                color: #383838;
            }
        }