使用此代码，如何展开和折叠..用一个按钮切换 ElementPlus Vue3 库的所有 el-collapse-items ？
2
805<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
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
请看一下以下代码片段：
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')您无法在手风琴模式下执行此操作。正如文档所述：
为此，您必须删除 accordion 属性并将 activeName 值更改为数组，就像文档中一样：
要展开/折叠所有项目，您可以创建一个函数，该函数将更改 activeNames 的值以包含 el-collapse-item名称 /em> 组件或为空，例如
toggleElements() { if(activeName.value.length) { activeName.value = []; } else { activeName.value = ['1', '2', '3', ...]; } }