element plus 实现纵向折叠面板

Element Plus 是一个基于 Vue 3 的桌面端组件库，它提供了许多 UI 组件，使得开发者能够快速地构建出美观且功能丰富的前端应用。实现一个纵向折叠面板，你可以使用 Element Plus 中的 `el-collapse` 组件和 `el-collapse-item` 子组件。

以下是基本的实现步骤：

1. 引入 Element Plus 并安装 `el-collapse` 和 `el-collapse-item` 组件。
2. 在你的 Vue 组件中添加 `el-collapse` 组件，并将其作为父容器。
3. 向 `el-collapse` 中添加多个 `el-collapse-item` 子组件，每个子组件对应一个可折叠的内容区域。
4. 通过 `title` 属性设置每个面板的标题。
5. 使用 `v-model` 绑定当前激活的面板项，这样可以控制面板的展开和折叠状态。
6. 可以通过 `name` 属性给每个面板项一个唯一的名称，以便于控制和管理。

下面是一个简单的示例代码：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item
      title="面板标题1"
      name="1">
      <!-- 面板1的内容 -->
      <p>这是面板1的内容</p>
    </el-collapse-item>
    <el-collapse-item
      title="面板标题2"
      name="2">
      <!-- 面板2的内容 -->
      <p>这是面板2的内容</p>
    </el-collapse-item>
    <!-- 更多的面板 -->
  </el-collapse>
</template>

<script>
import { ref } from 'vue';
import { ElCollapse, ElCollapseItem } from 'element-plus';

export default {
  components: {
    ElCollapse,
    ElCollapseItem,
  },
  setup() {
    const activeNames = ref(['1']); // 控制默认展开的面板，这里默认展开第一个面板
    return { activeNames };
  }
}
</script>

在上面的代码中，`activeNames` 数组用来存储当前激活的面板编号，你可以通过修改这个数组来控制面板的展开和折叠。`v-model` 绑定到这个数组上，实现双向数据绑定。