web-africa-h5/components/BuTing-Tree/Node.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>