Table of Contents

1、在需要点击触发事件的位置加上click事件

2、在点击区域内合适的地方加上图标

3、实现foldSwitch方法

4、实现changeStyle方法

VUE+element UI

这里简单记录如何手动实现手风琴，在使用不了现成的情况下，因为涉及到公司项目，所以一下总结的比较稀碎，合适有vue和element UI的基础的同学看，请见谅，我会把关键的点都记录下来。

1、在需要点击触发事件的位置加上click事件

@click="foldSwitch(index)"

 foldSwitch方法是点击的时候触发的，实现的目标有二：

1，实现该点击的列表展开或关闭

2，在点击列表展开的同时，其他列表要关闭

index：是for循环遍历的index，这个是用来判断是第几项被点击的。

2、在点击区域内合适的地方加上图标

 <i :class="status[index]?'el-icon-arrow-down':'el-icon-arrow-right'"></i>

这个是跟折叠面板的图标一样，展开的时候箭头向下，折叠的时候箭头向右。

status是个数组：

 status: [false, false, false],

为什么我需要status？我的实际情况是我能确定的我的折叠面板最多三个，里面初始化都是false，说明都是默认折叠的。

比如说我点击了第一个列表，index=1，那么此时的status为status: [true, false, false]，导致的情况是第一个列表的图标变化。以此类推。

3、实现foldSwitch方法

foldSwitch(index) {
       //折叠
      if (this.status[index]) {
        this.changeStyle("none", ".el-collapse", index);
        this.status= [...this.status];
        this.status[index] = false;
      } 
        //展开
        else {
        for (let i = 0; i < this.neighbourVesselsTableData.length; i++) {
          if (i == index) {
            this.changeStyle("block", ".el-collapse", index);
            this.status= [...this.status];
            this.status[index] = true;
          } else {
            this.status= [...this.status];
            this.changeStyle("none", ".el-collapse", i);
            this.status[i] = false;
          }
        }
      }
    },

changeStyle方法接下来细讲。

折叠的状态是从true变为false，所以先完成折叠操作，在给status重新赋值。

至于为什么要多写一句

this.status= [...this.status];

这个是重点也是关键

因为每次点击触发展开或折叠操作，变化的是status数组里面的数据，不是整个status数组，所以vue是检测不到status是已经发生改变的，解决办法就是加上面这句，让status重新生成，地址变化，vue检测到变化就会自动渲染到页面上，这时展开或折叠才会发生视觉效果。

 

展开也是重点，因为是手风琴，所以只能展开一项。我用到了for循环，判断是否等于当前点击的这一列表，如果是，该列表会展开，其他都会折叠，这样就达到了手风琴效果。

4、实现changeStyle方法

    changeStyle(status, className, index) {
      let dom = document.querySelectorAll(className);
      dom[index].style.display = status;
    },

该方法是比较原生的了，直接操作dom节点让列表展示或消失。

status：状态，“none”表示折叠，“block”表示展开；

className：类名，被折叠或展开的类名；

index：索引，表示该类名的dom节点的第几个，也就是第几个列表被展开或折叠。