wjxxy_xcx/components/tree/index.vue

<template>
	<view>
		<view v-for="(item,index) in treeList" :key="item.ldph" class="tree">
			<view class="head" @click="treeClick(item,index)">
				<image class="icon" :src="btn_unfold_normal_16" mode="" v-if="item.isClick && item.data"></image>
				<image class="icon" :src="btn_packup_normal_16" mode="" v-if="!item.isClick && item.data"></image>
				<view>{{ item.ldph }}</view>
			</view>

			<view v-if="item.isClick && item.data" class="children">
				<Tree :treeList="item.data" @node-click="nodeClick"></Tree>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'Tree',
		props: {
			treeList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				btn_packup_normal_16: require('./img/btn_packup_normal_16.svg'),
				btn_unfold_normal_16: require('./img/btn_unfold_normal_16.svg')
			}
		},
		methods: {
			treeClick(item, i) {
				item.isClick = !item.isClick
				const parent = this.treeList
				const index = i
				this.nodeClick(item, parent, index)
			},
			nodeClick(item, parent, index) {
				this.$emit('node-click', item, parent, index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tree {
		font-family: PingFangSC, PingFang SC;
		color: rgba(4, 8, 20, 1);
		// font-size: 14px;
		font-size: 56rpx;

		.head {
			display: flex;
		}

		.icon {
			// width: 36rpx;
			// height: 36rpx;
			width: 60rpx;
			height: 80rpx;
		}

		.children {
			// margin-left: 40rpx;
			margin-left: 60rpx;
		}
	}
</style>