vue el-tree添加层级指示线

最新推荐文章于 2024-06-30 10:22:34 发布

原创

最新推荐文章于 2024-06-30 10:22:34 发布 · 1.1w 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#el-tree #指示线 #竖线 #vue

1.div中放个tree

注意设置： :indent="0"，否则节点会出现较大缩进

 <div ref="treeDiv" class="tree-container">
    <el-tree id="tree" class="tree" @node-click="treeNodeClick"
             :indent="0"
             :props="defaultProps"
             :load="queryTreeNode"
             node-key="uniqueidentification" ref="tree" lazy>
    </el-tree>
  </div>

2.设置样式

注意：tree-container是tree父容器的class name，通过此方法设置tree的根节点样式

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

<style scoped>

  .tree /deep/ .el-tree-node {
    position: relative;
    padding-left: 16px;
  }

  .tree /deep/ .el-tree-node__children {
    padding-left: 16px;
  }

  .tree /deep/ .el-tree-node :last-child:before {
    height: 38px;
  }

  .tree /deep/ .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .tree-container /deep/ .el-tree > .el-tree-node: