效果图

组件

<template><div class="processBox" v-if="list.length"><div class="childs"><div class="child" v-for="(item,index) in list" :key="item.id +'-child-'+index"><div class="child-item" :style="{marginRight: item.children && item.children.length > 1 ? '20px' :''}"><div class="childname" :id="item.id"><div class="shows"><slot :items="item">{{item.name}}</slot></div><div class="position-arrow" v-if="list.length > 1"><i class="el-icon-right"></i></div><div class="position-top" v-if="isFirst(item.id) && domready" :style="position_top(item.id,'top')"></div><div class="position-top" v-if="isLast(item.id)" :style="position_top(item.id,'bottom')"></div></div><div class="childarrow" :style="{borderRight:item.children && item.children.length >1 ? '2px solid #606266' : '3px solid transparent'}"><div :class="item.children && item.children.length<=1?'long-img':''"></div><i class="el-icon-right" v-if="item.children && item.children.length" ></i></div></div><div class="child-children" v-if="item.children && item.children.length"><processJson :list="item.children" ><template v-slot="item"><slot :items='item.items' /></template></processJson></div></div></div></div>
</template><script>
export default {name: "processJson",components: {},data() {return {domready: false,};},props: {list: {type: Array,default: () => [],},},mounted() {this.$nextTick(() => {this.domready = true;});},methods: {position_top(id, position) {let dom = document.getElementById(id);let height;if (dom) {height = dom.clientHeight;}let rt;if (position === "top") {rt = {height: height / 2 - 2 + "px",top: 0,};}if (position === "bottom") {rt = {height: height / 2 + 1 + "px",bottom: 0,};}return rt;},isFirst(id) {return (this.list.length > 1 && this.list.map((x) => x.id).indexOf(id) === 0);},isLast(id) {return (this.list.length > 1 &&this.list.map((x) => x.id).indexOf(id) === this.list.length - 1);},},
};
</script><style lang="scss" scoped>
.el-icon-right{font-weight: 600;
}
.processBox {p {margin: 0;font-size: 13px;}display: flex;.father {width: 70px;background-color: red;padding: 100px 10px;}.childs {.child {display: flex;background-color: #fff;.child-item {display: flex;align-items: center;margin: 10px 0;.childname {.shows {text-align: left;border: 1px solid #b4b4b4;padding: 10px;// height: 100px;width: 100%;box-shadow: 1px 2px 8px #00000033;&:hover{box-shadow: 1px 2px 8px #00000066;}}cursor: pointer;height: 100%;display: flex;align-items: center;text-align: center;justify-content: center;position: relative;padding: 10px 0;.position-arrow {position: absolute;// top: 50%;left: -22px;}.position-top {position: absolute;width: 3px;background-color: #fff;left: -23px;height: 10px;}}.childarrow {height: 100%;// border-right: ;display: flex;align-items: center;}}}.child-children {display: flex;flex-direction: column;justify-content: center;}}.long-img{width: 20px;height: 2px;background-color: #606266;}.icon_arrow {// margin-left: 20px;&:after {width: 30px;height: 1px;background-color: #000;}}
}
</style>

调用

<template><div><josnToProcess :list="list"><template #default="{ items }"><div class="node_item ">{{items.unitName }}</div></template></josnToProcess></div>
</template><script>
import josnToProcess from "./tree-right.vue";
export default {name: "",props: {},components: { josnToProcess },data() {return {list: [{unitName: "长沙供电公司1",id: "1",children: [{unitName: "长沙供电公司1-1",id: "1-1",children: [{unitName: "长沙供电公司1-1-1",id: "1-1-1",},{unitName: "长沙供电公司1-1-2",id: "1-1-2",},],},{unitName: "1-2",id: "1-2",children: [{unitName: "1-2-1",id: "1-2-1",},],},{unitName: "长沙供电公司1-3",id: "1-3",children: [{unitName: "长沙供电公司1-3-1",id: "1-3-1",},{unitName: "长沙供电公司1-3-2",id: "1-3-2",},],},{unitName: "长沙供电公司1-4",id: "1-4",},],},{unitName: "长沙供电公司2",id: "2",},{unitName: "长沙供电公司3",id: "3",children: [{unitName: "长沙供电公司3-1",id: "3-1",children: [{unitName: "长沙供电公司3-1-1",id: "3-1-1",},],},{unitName: "长沙供电公司3-1-2",id: "3-1-2",children: [{unitName: "长沙供电公司3-1-2-1",id: "3-1-2-1",children: [{unitName: "长沙供电公司3-1-2-1-1",id: "3-1-2-1-1",},],},{unitName: "长沙供电公司3-1-2-2",id: "3-3-1-2-2",},],},],},{unitName: "长沙供电公司1-3",id: "4",},],showFields: [//show fields{name: "姓名：",key: "name",},{name: "年龄：",key: "age",},],};},computed: {},watch: {},methods: {},created() {},mounted() {},
};
</script><style scoped lang="scss">
.node_item {width: 230px;height: 116px;
}
</style>