vue el-tree添加层级指示线

最新推荐文章于 2024-11-19 12:44:16 发布

原创最新推荐文章于 2024-11-19 12:44:16 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

157 篇文章

订阅专栏

前端框架、插件

21 篇文章

订阅专栏

本文介绍了如何在Vue中使用el-tree组件添加层级指示线。通过设置`indent`属性和自定义样式，实现了节点的缩进调整和层级连接线的绘制。详细步骤包括在div中添加el-tree组件，设置必要的属性，以及编写CSS样式来完成指示线的显示。最后展示了添加层级指示线后的效果。

部署运行你感兴趣的模型镜像

1.div中放个tree
注意设置： :indent="0"，否则节点会出现较大缩进

<div ref="treeDiv" class="tree-container">
<el-tree id="tree" class="tree" @node-click="treeNodeClick"
:data="data" :indent="0" node-key="id" default-expand-all :expand-on-click-node="false" 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:after {
border-top: none;
}

.tree /deep/ .el-tree-node:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}

.tree /deep/ .el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}

.tree /deep/ .el-tree-node:before {
border-left: 1px dashed #4386c6;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}

.tree /deep/ .el-tree-node:after {
border-top: 1px dashed #4386c6;
height: 20px;
top: 12px;
width: 24px;
}

.tree-container { //树的parent，样式自定
}
</style>
3.效果图