如果收起/展开用于控制循环子组件，例如下

• 父组件如下

<template>
	<div>
		<demo v-for="item in list" :key="item.id" :formData="item" />
	</div>
</template>
import demo from './components/demp'
<script>
export default{
	components:{
		demp
	},
	data(){
		return{
			list:[]
		}
	},
	created(){
		this.getList()
	},
	methods:{
		async getList(){
			const res = await queryDemoList({})
			res.code === 200 ? this.list = res.data : this.$notify.error(res.message)
		}
	}
}
</script>

• demo 子组件如下

<template>
	<div>
		<el-button type="primary" @click="folded(formData.id)">
          	{{ hasFolded === formData.id ? '展开' : '收起' }}
    	</el-button>
    	<div :style="{ display: hasFolded === formData.id ? 'none' : '' }">
    		<!-- 内容 -->
    		<!-- 内容 -->
    		<!-- 内容 -->
    	</div>
    </div>
</template>
<script>
	export default{
		props:{
			formData:{
				type:Object,
				default:()=>{}
			}
		},
		data(){
			return{
				hasFolded: 0
			}
		},
		methods:{
			folded(id){
				this.hasFolded = this.hasFolded === id? 0 : id
			}
		}
	}
</script>

如果收起/展开用于普通循环 元素，例如下

采用数组的方式，对于收起，则将该元素放入数组，展开则取出

<template>
<div>
	<div v-for="item in list" :key="item.id">
		<el-button
            size="small"
            type="primary"
            @click="folded(item.id)"
          >
            {{ hasFoldedList.indexOf(itemd.bedId) != -1 ? '展开' : '收起' }}
    	</el-button>
    	<div
          class="content"
          :style="{ display: hasFoldedList.indexOf(item.id) != -1 ? 'none' : '' }"
        >
        	<!-- 内容 -->
    		<!-- 内容 -->
    		<!-- 内容 -->
        </div>
    </div>
</div>
</template>
<script>
export default{
	data(){
		return{
			hasFoldedList:[]
		}
	},
	methods:{
		foldedChildBed(id) {
      		this.hasFoldedList.indexOf(id) != -1
        		? (this.hasFoldedList = this.hasFoldedList.filter((item) => {
            	return item != id
          	}))
        		: this.hasFoldedList.push(id)
    	},
	}
}
</script>

这里:style换成v-show更好些🤩