在uniapp中实现折叠面板的效果 树形结构数据

本来以为只能在DCloud找组件来套，找了一圈发现都不是非常适合自己的需求，而且有些由于说明不全或难以理解做适应自己的细小变动，索性自己写了一遍。

效果大致是这样的，可以看得出来我有些层级展开到第二层就不往下继续了，而有些第二层下面还有第三层，所以，让我们来看看是如何实现的吧～

我先拆分给大家讲解一下各部分代码的意思，完整代码放在最后大家可以直接取用。

首先给大家看一下我们这里要渲染的data里面list的数据结构，需要注意的是，每一个还有子级的元素必须有一个open属性，用以作为控制当前层级是否展开的依据，供我们来操作显示与否。

list: [{
						name: "家电清洗",
						open: false,
						child: [{
							name: "空调清洗",
							child: []
						}, {
							name: "油烟机清洗",
							child: []
						}]
					},
					{
						name: "水电维修安装",
						open: false,
						child: [{
							name: "灯具电路维修与安装",
							open: false,
							child: [{
								name: "电路检测与维修",
								child: []
							}, {
								name: "灯具维修与安装",
								child: []
							}]
						}, {
							name: "龙头管件维修与安装",
							open: false,
							child: [{
								name: "水龙头维修与安装",
								child: []
							}, {
								name: "水管维修与安装",
								child: []
							}, {
								name: "阀门维修与安装",
								child: []
							}]
						} , {
							name: "管道疏通",
							open: false,
							child: [{
								name: "马桶疏通",
								child: []
							}, {
								name: "地漏疏通",
								child: []
							}]
						}]
					},
					{
						name: "房屋修缮",
						open: false,
						child: [{
								name: "防水补漏",
								open: false,
								child: [{
										name: "漏水定位检测",
										child: []
									}, {
										name: "卫生间防水补漏",
										child: []
									}, {
										name: "屋顶防水补漏",
										child: []
									}
								]
							}, {
								name: "房屋局改",
								open: false,
								child: [{
									name: "适老化改造",
									child: []
								}, {
									name: "儿童房改造",
									child: []
								}]
							}

						]
					}
				],

这一部分主要是三层v-for循环，每一级标题判断是否还有子级元素，如果有的话就需要“展开”和“收起”的按钮；

先看第一层：

第一层是最外层分类，如果这一层包含了子级那么item.child.length>0就能判断出来，且这时候item.open的状态也是true，也就是被点击之后，子级就会展示。

<view class="lvone" v-for="(item,index) in list">
    <view class="lvoneline">
        <view class="lvonetitle">{
  {item.name}}</view>
            <view class="oneexpand" v-if="item.child.length > 0 && item.open == false" @click="toggleOne(index)">
            </view>
			<view class="onecollapse" v-if="item.child.length > 0 && item.open == true" @click="toggleOne(index)">
			</view>
...

展开和收起的按钮，每点击一次都需要切换当前的展开/收起状态，但是因为是循环，我们需要将当前操作动作的这个元素的索引传给方法toggleOne(index)或者toggleTwo(index,childindex)，否则点击一下，所有当前层级都会开始动。这里注意，二级标题的展开和收起除了要传当前自己的索引，也要传递父级索引。一级标题收起的时候需要将其下的所有子级的open属性都置为false，所有子级也需要收起。

// 一级分类展开关闭
toggleOne(index) {
    const item = this.list[index];    
    if (item.open) {
		item.open = false;
		item.child.forEach(child => child.open = false);
	} else {
	    item.open = true;
	}
},
// 二级分类展开关闭
toggleTwo(index, childindex) {
	this.list[index].child[childindex].open = !this.list[index].child[childindex].open
}

从第二层开始，有些已经变成了可选择的项，而有些还有子级可以继