uniapp 手写折叠面板展示树形结构

引入弹出层组件

<TreeDataPicker ref="TreedataPicker" @selectVal="selectVal" />

打开弹出层组件 this.$refs["TreedataPicker"].open(getorgs);  

注意：getorgs 是一个请求方法

弹出层（uni-popup）配合 滚动组件（scroll-view）

<template>
	<uni-popup ref="popup" background-color="#fff" :mask-click="true" :is-mask-click="false" style="z-index: 1000;">
		<view class="title-box">
			选择部门
		</view>
		<view class="popup-content">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" style="height: 95vh;">
				<myCollapse :treeData="treeList" @myData="myData"></myCollapse>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script>
	import XEUtils from "@/plugins/xeutils/index.js";
	import myCollapse from '@/components/myCollapse/index.vue'
	export default {
		components: {
			myCollapse
		},
		data() {
			return {
				scrollTop: 0,
				treeList: [],
			};
		},
		methods: {
			// 递归处理树形结构数组
			addExpandedProperty(data) {
				if (Array.isArray(data)) {
					data.forEach(item => {
						if (Array.isArray(item.children) && item.children.length == 0) {
							item.expanded = false; // 当前项没有子节点
						} else {
							item.expanded = true; // 当前项有子节点
							item.isShowBtn = true // 当前项默认被展开
						}
						if (Array.isArray(item.children)) {
							this.addExpandedProperty(item.children); // 递归处理子节点
						}
					});
				}
			},
			// 打开
			async open(apiName) {
				let {
					result
				} = await apiName()
				this.treeList = XEUtils.toArrayTree(result)
				this.addExpandedProperty(this.treeList)
				console.log(this.treeList);
				this.$nextTick(() => {
					this.$refs.popup.open("right");
				});
			},
            // 将数据传递给父组件
			myData(value) {
				this.$emit('selectVal', value)
				this.$nextTick(() => {
					this.$refs.popup.close("right");
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.popup-content {
		width: 70vw;
		height: 100vh;
	}

	.title-box {
		height: 5vh;
		line-height: 5vh;
		background-color: #3880ff;
		color: #fff;
		text-align: center;
		font-weight: 600;
	}
</style>

 折叠面板组件 myCollapse.vue

<template>
	<div class="bigDiv">
		<ul>
			<li v-for="(item, index) in dataList" :key="index">
				<div class="showName" :style="{'padding-left':paddingStyle(level)}">
					<div @click="clickItem(item)" style="flex: 1;">{{ item.name }}</div>
					<div v-if="item.expanded" style="width: 20%;height: 20px;text-align: center;"
						@click.stop="iconClick(item)">
						<uni-icons :type="item.isShowBtn?'top':'bottom'" size="15"></uni-icons>
					</div>
				</div>
				<myCollapse v-show="item.isShowBtn" :treeData="item.children" :level="level+1" @myData="myData">
				</myCollapse>
			</li>
		</ul>
	</div>
</template>

<script>
	import myCollapse from '@/components/myCollapse/index.vue'
	export default {
		components: {
			myCollapse
		},
		props: {
			treeData: {
				type: Array,
				required: true
			},
			level: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				dataList: JSON.parse(JSON.stringify(this.treeData)),
				isShow: false,
			}
		},
		methods: {
			// 控制 padding
			paddingStyle(level) {
				return `${level * 20}px`;
			},
			// 点击右侧图标
			iconClick(item) {
				this.$set(item, 'isShowBtn', !item.isShowBtn)
			},
			// 点击选项将数据传给自己
			clickItem(item) {
				this.$emit('myData', item)
			},
			// 自己定义的方法自己接收
			myData(value){
				this.$emit('myData', value)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bigDiv {
		font-size: 14px;

		.showName {
			display: flex;
			justify-content: space-between;
			height: auto;
			padding: 10px 0;
			padding-right: 10px;
			border-bottom: 1px solid #ddd;
		}
	}
</style>