vue 实现手风琴折叠面板

这里代码是用的uni-app的，都一样！

<view class="leaderboard_cont_list" v-for="(item, index) in list" :key="index"
	@click="clickListShow(item,index)">
	<view class="leaderboard_cont_list_for">
		<view class="leaderboard_cont_list_left">
			{{item.name}}:&nbsp;&nbsp;{{item.detail?item.detail:'无'}}
		</view>
		<view class="leaderboard_cont_list_right" v-if="item.active">
			<u-icon name="arrow-down" size="20" color="#333"></u-icon>
		</view>
		<view class="leaderboard_cont_list_right" v-else>
			<u-icon name="arrow-right" size="20" color="#333"></u-icon>
		</view>
	</view>
	<view class="leaderboard_cont_list_data" v-if="item.active">
		<view class="title">
			<view class="title_1"></view>
			<view class="title_2">用户</view>
			<view class="title_2">持仓数</view>
			<view class="title_2">交易金额</view>
		</view>
		<view class="title" v-for="(item1, index1) in listData" :key="item1.rank">
			<view class="title_1">{{item1.rank}}.</view>
			<view class="title_2">{{item1.nickname}}</view>
			<view class="title_2">{{item1.card_total}}</view>
			<view class="title_2">{{item1.trade_total}}</view>
		</view>
	</view>
</view>

data() {
	return {
		list: [],
		listData: []
	}
},

初始化数据给每条数据添加一个是否显示的active属性用于判断是否展开

this.list.forEach(item => {
	this.$set(item, 'active', false)
})

// 点击展开查看详情
clickListShow(item, index) {
	this.listData = []
	let active = item.active  //先把点击的值存起来
	this.list.forEach(item => {  //把所有的active变为false
		this.$set(item, 'active', false)
	})
	item.active = !active  //把active变成不等于存起来的那个值
	this.$set(item, 'active', item.active)
	//this.$http.get().then(res => {
		//this.listData = res.data.rank
	//})
}