el-tree自定义连接虚线及展开行标签样式

辞忧*

已于 2024-10-24 15:14:46 修改

阅读量630

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： vue.js 前端 css 1024程序员节

于 2024-10-22 09:30:00 首次发布

本文链接：https://blog.csdn.net/Sugar_ask/article/details/143107766

web前端专栏收录该内容

16 篇文章

订阅专栏

通过css改变element ui的el-tree原有样式，并将子级与父级之间展开行添加连接线，层级之间添加斑马线效果。

html

<el-tree :data="data" :props="defaultProps"></el-tree>

scss

.el-tree {
  // 斑马线
  .el-tree-node {
    .el-tree-node__children {
      .el-tree-node.is-focusable:nth-child(odd) {
        background-color: rgba(131, 139, 155, 0.1);
      }
      .el-tree-node.is-focusable:nth-child(odd) {
        background-color: rgba(39, 46, 58 0.1);
      }
    }
  }
  // 自定义icon宽高
  .el-icon-caret-right {
    width: 15px;
    height: 15px;
    position: relative;
    transform: none;
  }
  // 隐藏默认icon
  .el-tree-node__expand-icon::before {
    content: "";
  }
  // 一级icon
  .el-tree-node {
    .el-tree-node__expand-icon::before {
      content: "";
      position: absolute;
      left: -2px;
      top: 0;
      width: 15px;
      height: 15px;
      background: url("本地01.png") no-repeat center;
      background-size: 100% 100%;
    }
    .el-tree-node__expand-icon.expanded::before {
      content: "";
      position: absolute;
      left: -2px;
      top: 0;
      width: 15px;
      height: 15px;
      background: url("本地02.png") no-repeat center;
      background-size: 100% 100%;
    }
    .el-tree-node__expand-icon.is-leaf::before {
      content: "";
    }
    // 子级icon
    & > .el-tree-node__children {
      .el-tree-node__expand-icon::before {
        content: "";
        position: absolute;
        left: -2px;
        top: 0;
        width: 15px;
        height: 15px;
        background: url("本地01.png") no-repeat center;
        background-size: 100% 100%;
      }
      .el-tree-node__expand-icon.expanded::before {
        content: "";
        position: absolute;
        left: -2px;
        top: 0;
        width: 15px;
        height: 15px;
        background: url("本地02.png") no-repeat center;
        background-size: 100% 100%;
      }
      .el-tree-node__expand-icon.is-leaf::before {
        content: "";
      }
    }
  }
  // 画虚线
  .el-tree-node::after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }
  .el-tree-node:last-child:before {
    height: 38px;
  }
  .el-tree-node::before {
    border-left: none;
  }
  .el-tree-node::before {
    content: "";
    position: absolute;
    left: -4px;
    right: auto;
    top: -26px;
    bottom: 0px;
    border-width: 1px;
    border-left: 1px dashed #8f8f8f;
    height: 100%;
    width: 1px;
  }
  .el-tree-node::after {
    content: "";
    position: absolute;
    left: -4px;
    right: auto;
    top: 12px;
    border-width: 1px;
    border-left: 1px dashed #8f8f8f;
    height: 20px;
    width: 24px;
  }
  .el-tree-node__content {
    padding-left: 0px !important;
  }
}