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中