最近在做项目时，遇到一个Collpase 嵌套Checkbox-group, Check-box,以及自定义图标的在右侧的问题，如下图所示：

问题：点击定义展开图标和折叠面板本身的事件重叠导致图标翻转出现错误，

思路：刚开始以为是事件冒泡到collapse面板了，试了vue再带的.stop, prevent, native.stop等修饰符，还是不起作用，

解决：去掉添加在自定义图标的展开事件，因为点击图标是包裹在Collapse dom 对象中的，所以点击图标事件会自动冒泡到collapse的change事件，导致事件重叠，所以只在collapse的@change事件中注册方法去处理图标的翻转即可

自定义图标代码：

<i class="w-icon-triangle-bottom" v-bind:class="{ isExpanded: item.isIconExpanded }"></i>

因为整个数据都是有层级嵌套的，所以得用item.去获取子级的数据和属性

<w-collapse

  v-for="(item, index) in list"

  :key="index"

  class="diagnosis-main"

  @change="expandSubItems(index)">

</w-collapse>

处理图标展开

.isExpanded {

    transform: rotate(180deg);

}

js 逻辑

expandSubItems(index) {

    this.isExpanded = !index.isExpanded

}