Usando este código, ¿cómo expandir y colapsar... alternar todos los elementos colapsados de ElementPlus Vue3 Library con un solo botón?
<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
Eche un vistazo al siguiente fragmento por favor:
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>No puede hacer esto en el modo acordeón . Como dice la documentación:
En modo acordeón, solo se puede expandir un panel a la vez
Para hacer esto, debe eliminar el accesorio de acordeón y cambiar el valor de nombre activo a una matriz, al igual que en la documentación:
const activeNames = ref(['1'])Para expandir/contraer todos los elementos, puede crear una función que cambiará el valor de activeNames para que contenga todos los nombres de los componentes el-collapse-item o para que esté vacío, por ejemplo
toggleElements() { if(activeName.value.length) { activeName.value = []; } else { activeName.value = ['1', '2', '3', ...]; } }