vue+elementui 摺疊面板的全部展開與全部顯示功能

最近的項目中涉及到了摺疊面板的全部展開與全部顯示功能

下面就大致的總結一下

第一種情況：開始顯示全部展開（這時面板全部都是收縮的），當其中的一個面板被手動打開，那麼就顯示全部收縮（這時面板至少一個被打開）這個是比較簡單的，看一下怎麼實現吧!

1. 首先需要在摺疊面板中綁定activeName，activeName用來裝每個面板的唯一標識

<el-collapse v-model="activeName">
 <el-collapse-item/> //中間是具體的每一個面板 都是通過後臺傳過來的列表進行循環顯示的
 <el-collapse-item/>
</el-collapse>

activeName需要在data裏面定義 這時進入頁面顯示全部展示按鈕，證明所有面板都是收縮的，所以activeName起初爲空

activeName = [] // 爲空就代表每個面板都在收縮的狀態

 

2. 接下來你需要控制全部展開與全部收縮的按鈕的展示後隱藏

<el-button v-if="activeName.length === 0" size="small" icon="el-icon-third-plus-arrow-down" @click="allExpand">全部展示</el-button>
<el-button v-else size="small" icon="el-icon-third-plus-arrow-up" @click="allShrink">全部收縮</el-button>

當activeName的長度爲0時，就顯示全部展開按鈕，當不爲0是就顯示全部收縮按鈕，這樣就會控制當其中的一個面板被手動打開，那麼就顯示全部收縮，因爲每打開一個面板那麼此面板的唯一標識就會被存到activeName數組中

3. 這時就來到了我們點擊按鈕的事件啦！！！ 

點擊全部展示按鈕

this.activeName = [] // 注意：由於每點開一個的單獨面板 activeName都會發生變化，所以點擊全部展開的時候要將activeName置空
for (const collapseTitleData of this.list) {
  this.activeName.push(collapseTitleData.id)
} // list一般爲從後臺拿到的列表，進行循環 將唯一標識push到面板集合綁定的activeName 這樣每個面板都會被打開 按鈕顯示爲全部收縮

點擊全部收縮按鈕

allShrink() {
   this.activeName = [] // 將面板集合綁定的activeName置空，這時面板會全部收縮，按鈕會變爲全部展示
},

第二種情況：開始顯示全部展開（這時面板全部都是收縮的），當所有的面板都被打開後，那麼就顯示全部收縮

1. 與情況一類似呀 只是多了一個事件

<el-collapse v-model="activeName" @change="activeNameChange">
 <el-collapse-item/> //中間是具體的每一個面板 都是通過後臺傳過來的列表進行循環顯示的
 <el-collapse-item/>
</el-collapse>

2. 控制顯示的按鈕呀

<el-button v-if="!showAllShrink" size="small" icon="el-icon-third-plus-arrow-down" @click="allExpand">全部展示</el-button>
<el-button v-if="showAllShrink" size="small" icon="el-icon-third-plus-arrow-up" @click="allShrink">全部收縮</el-button>

showAllShrink是用來控制是否顯示按鈕的，開始在data中定義默認false

3. 到了點擊的時刻

點擊全部展示

allExpand() {
   this.activeName = [] 
   for (const collapseTitleData of this.list) {
     this.activeName.push(collapseTitleData.id)
   } 
   this.showAllShrink = true //面板全部展開後我們要顯示全部收縮按鈕的呀
},

點擊全部收縮

allShrink() {
   this.activeName = [] 
   this.showAllShrink = false //全部收縮後需要把全部展示按鈕進行展示
},

面板集合定義的change事件，當activeName發生變化時觸發，也就會點擊具體的每個面板時觸發

activeNameChange(val) {
     this.showAllShrink = false //當某個面板進行展開時並不會影響到按鈕的變化 只有所有面板全部展開後 纔會顯示全部收縮按鈕
     if (this.activeName.length === this.list.length) {
     this.showAllShrink = true
   } // list爲渲染每一個面板的信息，那麼在面板全部展開的情況下，activeName的長度與list長度是相同的，因此當長度相同時，顯示全部收縮按鈕
},

兩種情況就結束啦... 當然還有第三種情況，就不具體說啦 提一下哦，那就是打開頁面默認全部面板展開 那麼就需要在created()中將list中的唯一標識都push到activeName中