waterElectricityMinApp/uni_modules/zwx-dropDown/components/zwx-dropDown/zwx-dropDown.vue

<template>
	<view style="padding-left: 30rpx;">
		<view class="dropDown">
			<view class="dropList" v-for="(item,index) in tree" :key="index">
				<view class="childrenContent parentnodePadding">
					<view :data-index="index" :data-id="item.id" :data-name="item.name" class="parentnode" @click="switchClick">
						<i
							:class="item.open?'iconfont el-icon-thirdiconfonti-copy iconactive openicon':' iconfont el-icon-thirdiconfonti openicon'"></i>
						<text :class="item.open?'iconactive':''">{{item.name}}</text>
					</view>

					<view v-if="item.file&&item.file.length>0&&item.open">
						<view v-for="(fileitem,fileindex) in item.file" :key="fileindex">
							<view :data-id="fileitem.fileid" :data-name="fileitem.name" class="fileclass" @click="filechange">
								<i class="iconfont el-icon-thirdwenjian"></i>
								<text>{{fileitem.name}}</text>
							</view>
						</view>
					</view>

					<dropDown v-if="item.children&&item.children.length>0 &&item.open" :node="item.children" @nodechange='switchClick' @filechange="filechange">
					</dropDown>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import dropDown from '@/uni_modules/zwx-dropDown/components/zwx-dropDown/zwx-dropDown'
	export default {
		name: 'dropDown',
		components: {
			dropDown
		},
		props: {
			node: {
				type: Array,
				default: () => []
			},
			isshowAll: {
				type: Boolean,
				default: true
			},
			ischeckedAll: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				tree: [],
			}
		},

		mounted() {
			this.tree = this.node;
		},

		methods: {
			switchClick(e) {
				const id = e.currentTarget.dataset.id;
				const index = e.currentTarget.dataset.index;
				this.$emit('nodechange', e)
				this.recursion(id, this.tree,e);
				
				
			},
			filechange(e){
				this.$emit("filechange",e)
			},
			async recursion(id, arr,e) {
				let _id = id
				await arr.forEach((item) => {
					if (item.id === _id) {
						let openstatus = item.open
						item.open = !openstatus;
					};
				})
				this.$nextTick(function() {
					this.tree = arr;
				})
			}

		}
	}
</script>

<style>
	@import url("./css/iconfont.css");

	.childrenContent {
		padding: 20rpx 50rpx 0 0;
		display: flex;
		/* align-items: flex-start; */
		flex-direction: column;
	}

	.childrenContent .parentnode {
		display: flex;
		align-items: center;
	}

	.childrenContent .parentnodePadding {
		margin-left: 10rpx;
	}

	.childrenContent .checkedFile {
		margin-left: 40rpx;
	}


	.childrenContent .iconfont {
		font-size: 30rpx;
		margin-right: 10rpx;
	}

	.childrenContent .iconactive {
		color: #007AFF;
	}

	.childrenContent .openicon {
		font-size: 40rpx;
	}

	.childrenContent .fileclass {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		padding: 10rpx 0;
		padding-left: 50rpx;
	}

	.childrenContent .fileclass .iconfont {
		font-size: 24rpx;
	}
</style>