bszn_xcx/components/tree-address/index.vue

<template>
	<view>
		<view class="sheng" v-for="(sheng) in treeList" :key="sheng.ldph">
			<view v-if="sheng.isClick">
				<view class="h_d s_u s_c" @click="shengClick(sheng)">
					<view>{{ sheng.ldph }}</view>
					<image :src="icon_arrow_up_black_16" class="s_i"></image>
				</view>


				<view class="shi" v-for="(shi) in sheng.data" :key="shi.ldph">
					<view class="shi_c" v-if="shi.isClick">
						<view class="shi_u h_d" @click="shiClick(shi)">
							<view>{{ shi.ldph }}</view>
							<image :src="icon_arrow_up_round_16" class="shi_i"></image>
						</view>

						<view class="qu_b">
							<view v-for="(qu,index) in shi.data" :key="qu.ldph" class="qu_item"
								@click="quClick(qu,shi,index)">
								{{ qu.ldph }}
							</view>
						</view>
					</view>

					<view class="shi_u h_d" v-else @click="shiClick(shi)">
						<view>{{ shi.ldph }}</view>
						<image :src="icon_arrow_down_round_16" class="shi_i"></image>
					</view>
				</view>
			</view>

			<view class="s_u h_d" v-else @click="shengClick(sheng)">
				<view>{{ sheng.ldph }}</view>
				<image :src="icon_arrow_down_black_16" class="s_i"></image>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'tree-address',
		props: {
			treeList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				icon_arrow_down_black_16: require('./img/icon_arrow_down_black_16.svg'),
				icon_arrow_up_black_16: require('./img/icon_arrow_up_black_16.svg'),
				icon_arrow_down_round_16: require('./img/icon_arrow_down_round_16.svg'),
				icon_arrow_up_round_16: require('./img/icon_arrow_up_round_16.svg'),
			}
		},
		methods: {
			shengClick(item) {
				item.isClick = !item.isClick
			},
			shiClick(item) {
				item.isClick = !item.isClick
			},
			quClick(item, parent, index) {
				this.$emit('node-click', item, parent.data, index)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.sheng {
		margin: 0 24rpx 24rpx 24rpx;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16rpx;
		padding: 0 24rpx;
		color: rgba(17, 17, 17, 1);
		font-size: 32rpx;
		font-weight: 600;

		.shi {
			color: rgba(17, 17, 17, 1);
			font-size: 28rpx;
			padding-left: 24rpx;

			.qu_b {
				background-color: rgba(248, 248, 248, 1);
				border-radius: 16rpx;
				padding: 8rpx;
			}

			.qu_item {
				width: 100%;
				height: 88rpx;
				padding: 24rpx;
			}

			.shi_c:last-child {
				padding-bottom: 24rpx;
			}

			.shi_u {
				width: 100%;
				height: 88rpx;
			}

			.shi_i {
				width: 32rpx;
				height: 32rpx;
			}
		}


		.s_c {
			border-bottom: 1rpx solid rgba(231, 231, 231, 1);
		}

		.h_d {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.s_u {
			width: 100%;
			height: 108rpx;
		}

		.s_i {
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>