uni-zhihuikuangshan/components/tree/tree.vue

<template>
	<view class="list">
		<view class="item" v-for="(item,index) in list" :key="index" @click.stop="open(index,item),click(index,item)">
			<view class="info">
				<view class="name">
					<!-- <uni-icons v-if="!item.children" style="margin-right: 30rpx;" type="eye" color="#009FE8"></uni-icons> {{item.name}} <text v-if="item.children" style="margin-left: 10rpx;">（{{item.children.length}})</text> -->
					<uni-icons v-if="!item.children" style="margin-right: 30rpx;" type="eye" color="#009FE8"></uni-icons>
					{{item.name}}
				</view>
				<view v-if="item.children && body_index != index" style="position: absolute;right: 20px;">
					<uni-icons type="arrowright"></uni-icons>
				</view>
				<view v-if="item.children && body_index == index" style="position: absolute;right: 20px;">
					<uni-icons type="arrowdown"></uni-icons>
				</view>

			</view>
			<view class="body" v-if="body_index == index">
				<tree :list="item.children"></tree>
			</view>
		</view>
	</view>

</template>

<script>
	import tree from "@/components/tree/tree.vue"
	export default {
		name: "tree",
		components: {
			tree
		},
		props: [
			"list"
		],
		data() {
			return {
				body_index: 9999,

			};
		},
		methods: {
			open(index, item) {
				if (this.body_index == index) {
					this.body_index = 99999
				} else {
					this.body_index = index
				}

			},
			click(index, item) {
				if (!this.list[index].children) {
					uni.navigateTo({
						url: "./video-block/video-block?mine_id=" + item.mine_id + "&name=" + item.name +
							"&parent_id=" + item.parent_id,
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	
	.list {
		margin-left: 25rpx;

		.item {
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			.info {
				display: flex;
				align-items: center;
				height: 90rpx;


				box-sizing: border-box;
				padding: 10rpx 0;

				border-bottom: 2rpx solid #f0f0f0;

				.name {
					margin-left: 25rpx;
				}

			}
		}
	}
</style>