嘿，我来帮你搞定这个用单个按钮控制Element Plus折叠面板全部展开/折叠的问题！

核心思路 #

Element Plus的el-collapse组件是通过v-model绑定的变量来控制面板展开状态的，两种模式下的逻辑略有不同：

• 非手风琴模式（默认）下，v-model是一个数组，包含所有当前展开面板的name值
• 手风琴模式（带accordion属性）下，v-model是一个字符串/单个值，仅表示当前唯一展开的面板name

我们只需要给按钮添加点击事件，根据当前模式切换v-model绑定变量的值，就能实现全展开/全折叠的切换。

情况1：手风琴模式（你的示例代码场景） #

你的示例里用了手风琴模式，同一时间只能展开一个面板，我们可以这样实现切换逻辑：

• 如果当前有面板展开，点击按钮就把所有面板折叠
• 如果所有面板都已折叠，点击按钮就展开第一个面板（你也可以改成指定的任意面板）

修改后的完整代码：

<template>
  <div class="demo-collapse">
    <!-- 控制按钮，文案随状态自动切换 -->
    <el-button @click="toggleAllPanels" type="primary" style="margin-bottom: 16px;">
      {{ activeName ? '全部折叠' : '全部展开' }}
    </el-button>
    
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item title="Consistency" name="1">
        <div>这是Consistency面板的内容</div>
      </el-collapse-item>
      <el-collapse-item title="Feedback" name="2">
        <div>这是Feedback面板的内容</div>
      </el-collapse-item>
      <el-collapse-item title="Efficiency" name="3">
        <div>这是Efficiency面板的内容</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const activeName = ref('1')

// 切换所有面板状态的方法
const toggleAllPanels = () => {
  // 手风琴模式下，activeName为空代表全部折叠
  if (activeName.value) {
    activeName.value = '' // 全部折叠
  } else {
    activeName.value = '1' // 展开第一个面板，可自定义目标面板name
  }
}
</script>

情况2：非手风琴模式（允许多面板同时展开） #

如果不需要手风琴限制，去掉accordion属性后，我们可以实现真正的全展开/全折叠：

• 如果当前有面板展开，点击按钮清空数组实现全折叠
• 如果所有面板都已折叠，点击按钮把所有面板的name存入数组实现全展开

完整代码示例：

<template>
  <div class="demo-collapse">
    <el-button @click="toggleAllPanels" type="primary" style="margin-bottom: 16px;">
      {{ activeNames.length > 0 ? '全部折叠' : '全部展开' }}
    </el-button>
    
    <el-collapse v-model="activeNames">
      <el-collapse-item title="Consistency" name="1">
        <div>这是Consistency面板的内容</div>
      </el-collapse-item>
      <el-collapse-item title="Feedback" name="2">
        <div>这是Feedback面板的内容</div>
      </el-collapse-item>
      <el-collapse-item title="Efficiency" name="3">
        <div>这是Efficiency面板的内容</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// 非手风琴模式下，v-model绑定数组
const activeNames = ref<string[]>(['1'])
// 存储所有面板的name，方便全展开时使用
const panelNames = ['1', '2', '3']

const toggleAllPanels = () => {
  if (activeNames.value.length > 0) {
    activeNames.value = [] // 全部折叠
  } else {
    activeNames.value = [...panelNames] // 全部展开
  }
}
</script>

如果你的面板是通过v-for动态生成的，只需要把panelNames改成从数据源中提取的name集合即可，不用手动写死~

内容的提问来源于stack exchange，提问作者Vimal Vinayraj