vue3.0实现自定义手风琴

1、html部分

    <div class="lesson" v-if="list.length > 0">
			<div v-for="(item, index) in list" :key="index">
                <---面板部分---->
				<div class="collapse-item web-flex" style="border-bottom: 1px solid #e8e8e8;position:relative;">
					<el-row class="collapse-item-header" @click="collapseClick(index)">
						<el-col :span="4" style="position: relative;">
							<img src="../assets/img/tip_icon.svg" alt="" style="position:absolute;left:-5px;top:10px;"
								v-if="item.stayNum > 0 && item.courseType == 2">
							<div class="first-collapse-item">
								{{item.courseName}}
							</div>
						</el-col>
						<el-col :span="1">
							<div>{{item.courseType == 0 ? '团课' : item.courseType == 1 ? '私教' : '培训'}}</div>
						</el-col>
						<el-col :span="3">
							<div>课时数：{{item.courseNum || '-'}}</div>
						</el-col>
						<el-col :span="4">
							<div>课时时长：{{item.courseTime}}分钟</div>
						</el-col>
						<el-col :span="4">
							<div>有效期：<span v-if="item.courseType != 0">{{item.termDay}}</span><span
									v-else>{{item.timeDay}}</span>天</div>
						</el-col>
						<el-col :span="5">
							<div>报名截止时间：{{item.deadTime}}</div>
						</el-col>
						<el-col :span="3">
							<div v-if="item.coursePrice">价格￥{{item.coursePrice}}</div>
						</el-col>
					</el-row>
                    <---面板操作按钮，使用element-ui会导致点击操作按钮手风琴打开---->
					<div class="btn-content web-flex">
						<div>
								<el-button type="text">修改</el-button>
								<el-button type="text">分班</el-button>
								<el-button type="text">报名</el-button>
						</div>
						<div @click="collapseClick(index)" style="flex:1;">
							<el-button type="text" class="float-right" style="margin-top:12px;">
								<img src="../assets/img/you.svg" alt="" :id="'img' + index"
									style="width:20px;height:20px;transition: 0.3s;">
							</el-button>
						</div>
					</div>
				</div>
                <---显隐部分---->
				<div class="collapse-item-body" :id="index">
					<div class="web-flex" v-for="(cell, index1) in item.reCoursePeriodList" :key="index1">
						<el-row class="collapse-item-content">
							<template v-if="cell.periodType == 1">
								<el-col :span="4" :offset="4">
									<div class="collapse-line">{{cell.date}}</div>
								</el-col>
								<el-col :span="4">
									<div class="collapse-line">{{cell.string}}</div>
								</el-col>
							</template>
							<el-col :span="8" :offset="4" v-if="cell.periodType != 1">
								<div class="collapse-line">{{cell.string}}</div>
							</el-col>
							<el-col :span="4">
								<div>报名总人数：{{cell.signNum}}</div>
							</el-col>
							<el-col :span="5" v-if="status == 1 && item.courseType == 2">
								<div class="orange">待分班人数：{{cell.stayNum}}</div>
							</el-col>
						</el-row>
						<div class="btn-content btn-context" v-if="status == 1">
							<el-button @click="openClass(cell, item)" v-if="item.courseType == 0" type="text"
								style="margin-right:20px;">开课时间
							</el-button>
							<router-link v-if="item.courseType == 2"
								:to="{path:'/apply',query:{code: cell.periodCode,id: item.courseCode}}">
								<el-button type="text">报名</el-button>
							</router-link>
						</div>
					</div>
                    <---内容部分的底部边框---->
					<div v-show="activeIndex == index" style="width:100%;border-bottom:1px solid #e8e8e8;"></div>
				</div>
			</div>

2、vue.js部分

    const list = ref([])
	const activeIndex = ref(null)
	const height = ref(0)
    //通过控制高度控制显隐
	const collapseClick = (index) => {
		if (activeIndex.value != null) {
			var al = document.getElementById(activeIndex.value)
			al.style.setProperty('height', '0px')
			var img1 = document.getElementById('img' + activeIndex.value)
			img1.style.setProperty('transform', 'rotateZ(0)')
		}
		var el = document.getElementById(index)
		var img = document.getElementById('img' + index)
		var height = el.scrollHeight;
		if (activeIndex.value == index) {
			activeIndex.value = null
			el.style.setProperty('height', '0px')
			img.style.setProperty('transform', 'rotateZ(0)')
		} else {
			activeIndex.value = index
			el.style.setProperty('height', height + 1 + 'px');
			img.style.setProperty('transform', 'rotateZ(90deg)')
		}
	}

3、样式

.collapse-item {
		width: 100%;
		height: 54px;
		line-height: 54px;
		background: #fafafa;
		padding: 0 20px;
		box-sizing: border-box;
		cursor: pointer;
	}


	.collapse-item-header {
		width: calc(100% - 160px);
	}

	.collapse-item-body {
		transition: 0.3s;
		height: 0;
		overflow: hidden;
		margin-bottom: 5px;
	}

	.collapse-item-body>div {
		padding: 0 20px;
		box-sizing: border-box;
	}

	.collapse-item-content {
		height: 32px;
		line-height: 32px;
		margin: 5px 0;
		width: calc(100% - 160px);
	}