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

先看效果：

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;
        }
      }
    }

样式修改后效果：

这篇好文章是转载于：学新通技术网