一、頁面渲染好tree
<template>
<div class='mytree'>
<el-tree :data="data" :indent='0' :props="defaultProps" @node-click="handleNodeClick">
</el-tree>
</div>
</template>
注意: :indent='0'這一項設置一下,否則線跟節點之間會有很大的縫隙
二、寫樣式
<style lang="scss" scoped>
.mytree /deep/{
.el-tree > .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 > .el-tree-node:before {
border-left: none;
}
.el-tree > .el-tree-node:after {
border-top: none;
}
.el-tree-node:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.el-tree-node:before {
border-left: 1px dashed #4386c6;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}
.el-tree-node:after {
border-top: 1px dashed #4386c6;
height: 20px;
top: 12px;
width: 24px;
}
}
<style>
效果圖:
感謝:這篇博客