如何用一個按鈕展開或折疊 ElementPlus Vue3 庫的所有 el-collapse-item？

Question

使用此程式碼，如何展開和折疊..用一個按鈕切換ElementPlusVue3庫的所有el-collapse-items？

P粉347804896 · Answer

請看以下程式碼片段：

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 }}

P粉251903163 · Answer

您無法在手風琴模式下執行此操作。正如文檔所述：

為此，您必須刪除 accordion 屬性並將 activeName 值變更為數組，就像文件中一樣：

const activeNames = ref(['1'])

要展開/折疊所有項目，您可以建立一個函數，該函數將更改activeNames 的值以包含el-collapse-item名稱 / em> 元件或為空，例如

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