uniapp 隐藏显示三级联动

uni-app 隐藏显示三级联动

1、js部分

    export default {
	onLoad() {
		this.getList();
	},
	data() {
		return {
			list: [],
			navigateFlag: false,//二级循环class判断 属性，默认为假（隐藏）
			share:false//三级循环class判断  属性，默认为假（隐藏）
		}
	},
	methods: {
		triggerCollapse(e) {//一级控制二级方法
			var that = this;
			var sh = that.navigateFlag;
			if (sh == e) {
				that.navigateFlag=false
			} else {
				that.navigateFlag=e
			}
		},
		goDetailPage(e) {//二级级控制三级方法
			var that = this;
			var sh = that.share;//获取share状态
			if (sh == e) {
				that.share=false
			} else {
				that.share=e
			}
		},
		getList() {
			uni.request({
				url: 'http://127.0.0.1/tp5.0/public/?s=index/index/get',
				method: 'GET',
				responseType: 'json',
				// header: {'content-type': 'application/json'},
				data: {
					id: 1
				},
				success: (res) => {
					this.list = res.data;
					console.log(res);
				}
			});
		}
	}
}

2、html部分

<template>
<view class="uni-container">
	<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
		<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index)">
			<text class="uni-panel-text">{{item.name}}</text>
			<text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">{{item.pages ? '&#xe581;' : '&#xe470;'}}</text>
		</view>
		<view class="uni-panel-c" v-if="item.open">
			<view  :class='navigateFlag==item.id?"show":"hidden"' v-for="(item2,key) in item.child" :key="key">
				<view class="uni-navigate-item" @click="goDetailPage(key)">
					<text class="uni-navigate-text">{{item2.name ? item2.name : item2}}</text>
					<text class="uni-navigate-icon uni-icon">&#xe470;</text>
				</view>
				<view class="uni-navigate-item" :class='share==item2.id?"show":"hidden"' v-for="(item3,key) in item2.child" :key="key">
					<text style="padding-left:2rem;">{{item3.name ? item3.name : item3}}</text>
				</view>
			</view>
		</view>
	</view>
</view></template>

3、css部分

.show{
	display: block;
}
.hidden{
	display: none;
}

4、后端（php）数据结构图

5、效果图

6、总结

   :class='navigateFlag==item.id?"show":"hidden"'  前端利用三元运算符判断navigateFlag的状态，当navigateFlag为真时添加show class名，当navigateFlag为假时添加hidden class名，navigateFlag状态值由js控制