如何用一个按钮切换ElementPlus Vue3库的所有el-折叠项？

Question

使用此代码，如何展开和折叠。只需一个按钮就可以切换ElementPlus Vue3库的所有el-折叠项？

<template>
<div class="demo-collapse">
<el-collapse v-model="activeName" accordion>
  <el-collapse-item title="Consistency" name="1">

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

const activeName = ref('1')
</script>

https://element-plus.org/en-US/component/collapse.html#accordion

Answer 1

您不能在手风琴模式下这样做。正如文件所述：

在手风琴模式下，一次只能展开一个面板。

要做到这一点，您必须删除手风琴支柱，并将activeName值更改为数组，如文档中所示：

  const activeNames = ref(['1'])

若要展开/折叠所有项，可以创建一个函数，该函数将更改activeNames的值，以包含el折叠项组件的所有名称或为空，例如

toggleElements() {
  if(activeName.value.length) {
    activeName.value = [];
  } else {
    activeName.value = ['1', '2', '3', ...];
  }
}

Answer 2

请看下面的片段：

​

const { ref } = Vue

const app = Vue.createApp({
  setup() {
    const items = ref([{id: 1, title: "first", text: "aaaaaaaaaaaa"}, {id: 2, title: "second", text: "bbbbbbbbbbbb"}, {id: 3, title: "third", text: "ccccccccccc"}])
    const activeName = ref([1]);
    const toggleAll = () => {
      activeName.value = activeName.value.length === items.value.length 
        ? [] 
        : items.value.map(i => i.id)
    }
    return { items, activeName, toggleAll };
  },
})
app.use(ElementPlus);
app.mount('#demo')

<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<script src="//unpkg.com/vue@3"></script>
<script src="//unpkg.com/element-plus"></script>

<div id="demo">
  <div class="flex justify-space-between mb-4 flex-wrap gap-4">
    <el-button type="primary" text bg @click="toggleAll">toggle all</el-button>
  </div>
  <div class="demo-collapse">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item v-for="item in items" :key="item.id" :title="item.title" :name="item.id">
        <div>
          {{ item.text }}
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</div>

​