189 lines
3.3 KiB
Vue
189 lines
3.3 KiB
Vue
<template>
|
|
<view class="">
|
|
<view class="tree-row">
|
|
|
|
<view class="tree-node" v-for="(item,index) in treeData" :key="index">
|
|
<!-- <view class="line-top" v-if="item.relation">
|
|
<view :class="[topStyle(index)]" :data-attr="item.relation"></view>
|
|
</view> -->
|
|
<view class="tree-col">
|
|
<view class="tree-col-item">
|
|
{{item.name}}
|
|
</view>
|
|
<!-- <view class="tree-col-item" v-if="item.spouse">
|
|
{{item.spouse}}
|
|
</view> -->
|
|
</view>
|
|
<view class="line-bottom" v-if="item.children&&item.children.length>0"></view>
|
|
<view v-if="item.children&&item.children.length>0">
|
|
<Node :data="item.children" :isTop="false"></Node>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import Node from "./Node.vue"
|
|
export default {
|
|
name: 'Node',
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
isTop: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
components: {
|
|
Node
|
|
},
|
|
data() {
|
|
return {
|
|
treeData: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.treeData = this.data
|
|
console.log('载入组件', this.treeData)
|
|
},
|
|
watch: {
|
|
data(newData, old) {
|
|
this.treeData = newData
|
|
}
|
|
},
|
|
methods: {
|
|
topStyle(index) {
|
|
if (this.isTop == true) {
|
|
return ''
|
|
} else {
|
|
if (this.treeData.length == 1) {
|
|
return 'line-vertical'
|
|
}
|
|
if (this.treeData.length == index + 1) {
|
|
|
|
return 'line-vertical line-right'
|
|
}
|
|
if (index == 0) {
|
|
return 'line-vertical line-left'
|
|
}
|
|
return 'line-vertical line-center'
|
|
}
|
|
|
|
|
|
},
|
|
onChange(e) {
|
|
console.log(e)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.line-tree {
|
|
height: 2rpx;
|
|
width: 100%;
|
|
background-color: #ddd;
|
|
}
|
|
|
|
.tree-row {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.tree-node {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.line-top {
|
|
height: 150rpx;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.line-left {
|
|
&::before {
|
|
content: "";
|
|
height: 2rpx;
|
|
background-color: #ddd;
|
|
width: 50%;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.line-center {
|
|
&::before {
|
|
content: "";
|
|
height: 2rpx;
|
|
background-color: #ddd;
|
|
width: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.line-right {
|
|
&::before {
|
|
content: "";
|
|
height: 2rpx;
|
|
background-color: #ddd;
|
|
width: 50%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
}
|
|
}
|
|
|
|
.line-vertical {
|
|
margin: 0 auto;
|
|
background-color: #ddd;
|
|
font-size: 0.75rem;
|
|
border-top: 1rpx solid #fff;
|
|
height: 150rpx;
|
|
width: 2rpx;
|
|
|
|
&::after {
|
|
content: attr(data-attr);
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 50%;
|
|
transform: translate(0, -50%);
|
|
height: 150rpx;
|
|
writing-mode: vertical-rl;
|
|
letter-spacing: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.line-bottom {
|
|
height: 50rpx;
|
|
width: 2rpx;
|
|
background-color: #ddd;
|
|
font-size: 0.75rem;
|
|
position: relative;
|
|
}
|
|
|
|
.tree-col {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin: 0 80rpx;
|
|
|
|
.tree-col-item {
|
|
text-align: center;
|
|
letter-spacing: 20rpx;
|
|
writing-mode: vertical-rl;
|
|
border: 1rpx solid #ddd;
|
|
padding: 20rpx 10rpx;
|
|
min-height: 110rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |