vue element el-card 循环展开收起

在Vue.js中，Element UI库提供了一个名为`el-card`的组件，用于创建卡片样式的内容区域。如果你想在列表中循环展示这些卡片，并能实现展开和收起的功能，可以结合Vue的数据绑定和Element的折叠面板`el-collapse`来实现。

首先，在模板（template）部分，你可以遍历数据并使用`v-for`指令为每个元素创建一个`el-collapse`：

<template>
  <div>
    <el-collapse v-for="item in listItems" :key="item.id">
      <el-collapse-item title="{{ item.title }}">
        <p>{{ item.content }}</p>
        <!-- 使用v-if或v-show控制展开状态 -->
        <el-collapse-transition>
          <template #default="{ collapsed }">
            <p v-if="!collapsed">展开内容...</p>
          </template>
        </el-collapse-transition>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

然后，在你的Vue实例的data里，定义一个数组`listItems`来存储需要展开收起的数据：

export default {
  data() {
    return {
      listItems: [
        { id: 1, title: '卡片1', content: '这是卡片1的内容' },
        { id: 2, title: '卡片2', content: '这是卡片2的内容' },
        // 添加更多的卡片...
      ],
    };
  }
};

在上面的例子中，`v-if`或`v-show`属性可以根据你的需求来控制默认展开还是初始隐藏。用户点击标题时，折叠面板会切换展开状态。