主要就是这种样式
是用的elementui里的el-tree 然后通过伪类的编辑获得当前树
代码:(/deep/放在.vue文件会报错,可以提出来css)
<template>
<div>
<div class="hello">
<el-tree
:data="treeData"
:props="defaultProps"
default-expand-all
:expand-on-click-node="false">
</el-tree>
</div>
</div>
</template>
<style lang="scss" scoped>
/deep/ .hello {
.el-tree > .el-tree-node > .el-tree-node__content:first-child {
&::before,
&::after {
border: none;
}
}
.el-tree-node .el-tree-node__content {
height: 30px;
&::before,
&::after {
content: "";
position: absolute;
right: auto;
}
&::before {
border-left: 1px solid #e6e6e6;
bottom: 50px;
height: 100%;
top: 0;
width: 1px;
margin-left: -5px;
margin-top: -15px;
}
&::after {
border-top: 1px solid #e6e6e6;
height: 20px;
top: 14px;
width: 10px;
margin-left: -5px;
}
}
.el-tree .el-tree-node {
position: relative;
}
}
</style>
<script>
export default {
name: 'hello',
data () {
return {
treeData: [
{
id: 1,
name: '技术部',
level: 1,
child: [
{
id: 2,
name: '运维组',
level: 2,
child: [
{
id: 3,
name: '测试',
level: 3,
child: [
{
id: 4,
name: '前端',
level: 4,
child: [
{
id: 4,
name: '前端',
level: 4
}
]
}
]
},
{
id: 4,
name: '前端',
level: 4
}
]
},
{
id: 4,
name: '测试组',
level: 2,
child: []
}
]
}
],
defaultProps: {
children: 'child',
label: 'name'
}
}
}
}
</script>