Bagaimana untuk mengembangkan atau meruntuhkan semua el-collapse-item perpustakaan ElementPlus Vue3 dengan satu butang?

Question

Dengan kod ini, bagaimanakah saya boleh menogol kembang dan runtuh..semua item el-runtuhkan perpustakaan ElementPlus Vue3 dengan satu butang?

<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

Sila lihat coretan kod berikut:

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')

sssccc
sssccc


  

    toggle all
  
  

    
      
        

          {{ item.text }}
        
      
    
  

Answer 2

Anda tidak boleh melakukan ini dalam mod Accordion. Seperti yang dinyatakan dalam dokumentasi:

Untuk melakukan ini, anda perlu mengalih keluar atribut akordion dan menukar nilai activeName kepada tatasusunan, seperti dalam dokumentasi:

const activeNames = ref(['1'])

Untuk mengembangkan/meruntuhkan semua item, anda boleh mencipta fungsi yang akan menukar nilai Nama aktif untuk memasukkan semua nama< 的所有 /em> komponen el-collapse-item< atau kosong, seperti

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