uniapp二级展开列表

<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>
				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>
					view>
				view>
			view>
		view> 
	view>
template>

<script>
	
	
		export default {
			data() {
				return {
					positionSele: true,
					positionlist: [{
						id: 0,
						onename: "销售|客服|市场",
						oneliststare: false,
						positiontwo: [{
							twoid: 0,
							twoname: "销售业务",
							twoliststare: false,
						},{
							twoid: 1,
							twoname: "销售管理",
							twoliststare: false,
						}]
					},{
						id: 1,
						onename: "IT|互联网|通信",
						oneliststare: false,
						positiontwo: [{
							twoid: 0,
							twoname: "软件/互联网开发/系统集成",
							twoliststare: false,
						},{
							twoid: 1,
							twoname: "互联网产品/运营管理",
							twoliststare: 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
				},
			}
		}
script>

<style>
	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_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_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 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; }
style>

参考：https://blog.csdn.net/changshataofan/article/details/111590318