使用 grid 实现折叠面板功能

<script setup lang="ts">
import { ref } from 'vue'

const dropDown = ref(true)

// 折叠
const handleFoldUp = () => {
  if (dropDown.value) {
    dropDown.value = false
  } else {
    dropDown.value = true
  }
}
</script>

<template>
  <el-card>
    <div ref="select" class="filter-form" :class="!dropDown ? 'filter-form-active' : ''">
      <el-form ref="filterFormRef" label-width="auto">
        <el-form-item label="姓名"> <el-input /> </el-form-item>
        <el-form-item label="姓名"> <el-input /> </el-form-item>
        <el-form-item label="姓名"> <el-input /> </el-form-item>
      </el-form>
    </div>
    <el-button class="dropbutton" text bg @click="handleFoldUp">{{
      !dropDown ? '收起' : '下拉'
    }}</el-button>
  </el-card>
</template>

<style scoped lang="scss">
.filter-form {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-out;
  .el-form {
    overflow: hidden;  // 重要！
  }
}
.filter-form-active {
  grid-template-rows: 1fr;
}
.dropbutton {
  width: 100%;
}
</style>