el-tree 自定义节点内容及样式修改记录

最新推荐文章于 2024-05-01 01:20:57 发布

TangAcrab

最新推荐文章于 2024-05-01 01:20:57 发布

阅读量2.1k

点赞数

分类专栏： css vue 文章标签： vue.js el-tree修改样式 el-tree自定义节点内容

本文链接：https://blog.csdn.net/weixin_39786582/article/details/128183505

版权

vue 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

先看效果：
在这里插入图片描述

1、节点内容自定义添加文件图标

在默认插槽中添加。插槽作用域包含 slot-scope="{ data, node }"
在这里插入图片描述

2、样式修改

    // 隐藏 自定义节点时，最后一级的箭头
    /deep/ .el-tree-node__expand-icon.is-leaf::before {
      display: none;
    }
    // 自定义tree 节点样式
    // /deep/ .el-tree-node {
    //   white-space: normal;
    // }
	// 修改 tree 背景色和文字颜色
    /deep/ .el-tree {
      background: var(--grey0);
      color: var(--grey900);
    }
    // 修改节点高度
    /deep/ .el-tree-node__content {
      height: 36px;
    }
    
    /deep/ .el-tree-node {
      border: 1px solid transparent;
    }
    // 修改 展开、收起三角图标颜色
    /deep/ .el-tree-node__expand-icon {
      color: var(--grey500);
    }
    /deep/ .el-tree-node__label {
      font-size: 16px;
    }
    // 修改 节点 hover 背景色
    /deep/ .el-tree-node__content:hover {
      background: var(--grey0);
    }
    // 修改节点 focus 背景色
    /deep/ .el-tree-node:focus {
      .el-tree-node__content {
        background: var(--grey0);
      }
    }
    // 修改选中激活项样式。 注意 我这里 tree 动态添加了 .activeTreeBox 
    /deep/ .activeTreeBox .el-tree-node.is-current {
      border: 1px solid #0091ff;
      background: #1d3144 !important;
      border-radius: 4px;
      &:hover {
        .el-tree-node__content {
          background: transparent;
        }
      }
      &:focus {
        .el-tree-node__content {
          background: transparent;
        }
      }
    }