zhgdyunapp/components/tree-node/index.vue

 
<template>
	<view class="tree-content-compontent">
		<view class="content-box" @click="expandFn">
			<u-icon name="arrow-right" color="#D5D5D5" size="44" v-if="!expanded && item.children && item.children.length" style="margin-right: 10rpx;"></u-icon>
			<u-icon name="arrow-down" color="#D5D5D5" size="44" v-if="expanded && item.children && item.children.length" style="margin-right: 10rpx;"></u-icon>
			<text class="box-text" @click.stop="toggleNodes(item)">{{ item.groupName }}</text>
			<image v-if="(!item.children || !item.children.length)" style="width:60rpx;height:60rpx;" src="../../static/videoControlIcon/videoIcon.png" mode="">
			</image>
			<!-- <image style="width:80rpx;height:80rpx;float:left" src="../../static/icon-down-black.png" mode="">
			</image> -->
		</view>
		<view class="sub-component">
			<view :class="expanded == true ? 'expandedStyle' : ''" v-if="item.children && item.children.length && expanded">
				<tree-menu v-for="child in item.children" :key="child.id" :item="child" :treeIndex="treeIndex + 1" @clickItem="clickTreeItem"></tree-menu>
			</view>
		</view>
	</view>
</template>
  
<script>
export default {
	name: 'TreeMenu',
	props: ['item','treeIndex'],
	data() {
		return {
			expanded: false,
		};
	},
	methods: {
		clickTreeItem(item){
			console.log(item,777888)
			uni.navigateTo({
				url: './videoList?obj=' + JSON.stringify(item)
			})
		},
		expandFn(){
			this.expanded = !this.expanded;
		},
		toggleNodes(item) {
			this.$emit('clickItem', item);
		}
},
}
</script>
 
<style lang="scss" scoped>
.tree-content-compontent{
	background: #F5F5F5;
	.content-box{
		display: flex;
		align-items: center;
		justify-content: start;
		padding: 20rpx 36rpx;
		position: relative;
		// border-bottom: 2px solid #D6D6D6;
		>text{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #272D45;
			margin-right: auto;
			display: inline-block;
			flex: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.sub-component{
		background: #FFFFFF;
		.tree-content-compontent{
			background: #FFFFFF;
		}
	}
	.expandedStyle{
		margin-left: 60rpx;
	}
}
</style>