转载：vue实现高度不固定元素的展开收起_vue3 实现折叠功能 不固定高度

const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'
const Transition = {
  'before-enter' (el) {
    el.style.transition = elTransition
    if (!el.dataset) el.dataset = {}
 
    el.dataset.oldPaddingTop = el.style.paddingTop
    el.dataset.oldPaddingBottom = el.style.paddingBottom
 
    el.style.height = 0
    el.style.paddingTop = 0
    el.style.paddingBottom = 0
  },
 
  'enter' (el) {
    el.dataset.oldOverflow = el.style.overflow
    if (el.scrollHeight !== 0) {
      el.style.height = el.scrollHeight + 'px'
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    } else {
      el.style.height = ''
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    }
 
    el.style.overflow = 'hidden'
  },
 
  'after-enter' (el) {
    el.style.transition = ''
    el.style.height = ''
    el.style.overflow = el.dataset.oldOverflow
  },
 
  'before-leave' (el) {
    if (!el.dataset) el.dataset = {}
    el.dataset.oldPaddingTop = el.style.paddingTop
    el.dataset.oldPaddingBottom = el.style.paddingBottom
    el.dataset.oldOverflow = el.style.overflow
 
    el.style.height = el.scrollHeight + 'px'
    el.style.overflow = 'hidden'
  },
 
  'leave' (el) {
    if (el.scrollHeight !== 0) {
      el.style.transition = elTransition
      el.style.height = 0
      el.style.paddingTop = 0
      el.style.paddingBottom = 0
    }
  },
 
  'after-leave' (el) {
    el.style.transition = ''
    el.style.height = ''
    el.style.overflow = el.dataset.oldOverflow
    el.style.paddingTop = el.dataset.oldPaddingTop
    el.style.paddingBottom = el.dataset.oldPaddingBottom
  }
}
 
export default {
  name: 'collapseTransition',
  functional: true,
  render (h, { children }) {
    const data = {
      on: Transition
    }
    return h('transition', data, children)
  }
}

建个JS文件随便取个名字，把上面的js复制进去，然后在你要用的页面 import 组件名字(随便取) from '你建的JS文件路径'，export default{components:{组件名字}}，data添加isActive=true;

 <标签 @click="isActive=!isActive">打开或者收缩</标签>
<组件名字>

 <div class="collapse-wrap"
   v-show="isActive">
  <!-- @slot default -->
  <slot></slot>
</div> 

</组件名字>

https://segmentfault.com/q/1010000011359250