uniapp 三级折叠列表(展开/收起)_uniapp多级折叠列表

1.view部分

<template>
	<view class="content">

		<view class="position-group">

			<!-- 一级循环 -->
			<view class="pronames_one" v-for="(item,index) in positionlist" :key="index" :class="item.oneliststare?'oneshow':'onehide'">
				<view class="pronames-one-label" @click="onelist(index)"><text>{{item.onename}}</text><label :class="item.oneliststare?'cuIcon-fold':'cuIcon-unfold'"></label></view>
				<!-- 二级循环 -->
				<view class="pronames_two" v-for="(item2,index2) in item.positiontwo" :key="index2" :class="item2.twoliststare?'twoshow':'twohide'">
					<view class="pronames-two-label" @click="twolist(index,index2)"><text>{{item2.twoname}}</text><label :class="item2.twoliststare?'cuIcon-fold':'cuIcon-unfold'"></label></view>
					<view class="pronames_three">
						<!-- 三级循环 -->
						<view class="pronames_three-label" v-for="(item3,index3) in item2.positionthree" :key="index3" @click="threelist"><label
							 :class="positionSele?'cuIcon-round':'cuIcon-roundcheckfill'"></label><text>{{item3.trheename}}</text></view>
					</view>
				</view>
			</view>

		</view> 

	</view>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2.js部分

	export default {
		data() {
			return {

				positionSele: true,
				positionlist: [{
					id: 0,
					onename: "销售|客服|市场",
					oneliststare: false,
					positiontwo: [{
						twoid: 0,
						twoname: "销售业务",
						twoliststare: false,
						positionthree: [{
							trheeid: 0,
							trheename: "销售代表",
							twoselestare: false
						},{
							trheeid: 0,
							trheename: "客户代表",
							twoselestare: false
						},{
							trheeid: 0,
							trheename: "销售顾问",
							twoselestare: false
						}
						]
					},{
						twoid: 1,
						twoname: "销售管理",
						twoliststare: false,
						positionthree: [{
							trheeid: 0,
							trheename: "销售主管",
							twoselestare: false
						},{
							trheeid: 0,
							trheename: "销售经理",
							twoselestare: false
						},{
							trheeid: 0,
							trheename: "销售总监",
							twoselestare: false
						}
						]
					}]
				},{
					id: 1,
					onename: "IT|互联网|通信",
					oneliststare: false,
					positiontwo: [{
						twoid: 0,
						twoname: "软件/互联网开发/系统集成",
						twoliststare: false,
						positionthree: [{
							trheeid: 0,
							trheename: "软件工程师",
							twoselestare: false
						},{
							trheeid: 1,
							trheename: "软件研发工程师",
							twoselestare: false
						},{
							trheeid: 2,
							trheename: "高级软件工程师",
							twoselestare: false
						}
						]
					},{
						twoid: 1,
						twoname: "互联网产品/运营管理",
						twoliststare: false,
						positionthree: [{
							trheeid: 0,
							trheename: "网店客服",
							twoselestare: false
						},{
							trheeid: 1,
							trheename: "网店运营",
							twoselestare: false
						},{
							trheeid: 2,
							trheename: "网店管理员",
							twoselestare: false
						}
						]
					}]
				}]

			}
		},
		onLoad() {},
		methods: {
			
			onelist(index){
				let positionlist = this.positionlist;
				// 展开收起一级列表 start
				if(positionlist[index]['oneliststare'] == false){
					positionlist[index]['oneliststare'] = true;
				}else{
					positionlist[index]['oneliststare'] = false;
				}
				// 展开收起一级列表 end
			},
			
			twolist(index,index2){
				
				let positionlist = this.positionlist;
				let positiontwo = this.positionlist[index].positiontwo[index2]['twoliststare'];
				
				console.log(positiontwo)

				
				// 展开收起二级列表 start
				
				if(positiontwo == false){
					this.positionlist[index].positiontwo[index2]['twoliststare'] = true;
				}else{
					this.positionlist[index].positiontwo[index2]['twoliststare'] = false;
				}
				// 展开收起二级列表 end				
				
			}
			
		}
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

3.css部分

	page {
		background: #fff;
	}

	.position-group {
		width: 100%;
		height: auto;
	}


	/* 一级 */
	.pronames_one {
		width: 100%;
		height: auto;
	}

	.pronames-one-label {
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		background: #fff;
		box-sizing: border-box;
		padding: 0px 3%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eaeaea solid;
	}

	.pronames-one-label text {
		font-size: 15px;
		color: #2ebbfe;
	}
	
	.pronames-one-label label{
		color: #aaa;
		font-size: 20px;
		transition: all 0.5s;
		
	}

	


	/* 二级 */
	.pronames_two {
		width: 100%;
		height: auto;
		transition: all 0.5s;
	}

	.pronames-two-label {
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 3%;
		border-bottom: 1px #eee solid;
	}

	.pronames-two-label text {
		font-size: 15px;
		color: #333;
	}

	.pronames-two-label label{
		color: #aaa;
		font-size: 20px;
		transition: all 0.5s;		
		
	}



	/* 三级 */
	.pronames_three {
		width: 100%;
		height: auto;
	}

	.pronames_three-label {
		width: 97%;
		margin-left: 3%;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		flex-direction: row;
		border-bottom: 1px #f1f1f1 solid;
		align-items: center;
	}

	.pronames_three-label label {
		width: 10%;
		height: 90rpx;
		line-height: 90rpx;
		display: block;
		color: #D5D5D5;
		font-size: 20px;
	}

	.pronames_three-label text {
		width: 90%;
		font-size: 15px;
		color: #868686;
	}
	
	
	/* 展开收起效果 start */
	
	.oneshow{}
	.oneshow .pronames_two{ display: block; }
	.onehide{} 
	.onehide .pronames_two{ display: none; }
	
	/* 展开收起效果 end */	
	
	
	.twoshow{}
	.twoshow .pronames_three{ display: block; }
	.twohide{} 
	.twohide .pronames_three{ display: none; }
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129