今天在开发的过程中，遇到一个问题，特此记录。

项目的一个功能所需类似手风琴的效果，因为是VUE，所以选择采用element的el-collapse。

<div class='mine'>
 <el-collapse accordion>
   <div
    v-for="item in titleList"
    :key="item.id"
     @click="clickHandle(item)"
     >
      <el-collapse-item>
        <template slot="title">{{item.title}}</template>
        {{alignsItem.name}}
      </el-collapse-item>
   </div>
 </el-collapse-item>
</div>

但是默认的样式会很丑，该如何默认修改样式呢？
我采用的是 v-deep

.mine{
::v-deep {
        .el-collapse {
          box-sizing: border-box;
          padding-left: 25px;
          border: none;
          .el-collapse-item__header {
            border: none;
            background-color: transparent;
          }
          .el-collapse-item__wrap {
            background-color: transparent;
            border: none;
            .el-collapse-item__content {
              padding: 0;
            }
          }
        }
      }}

但是如果想监听红色框的点击事件，element是没有提供该方法的。经过多方面的排除、尝试，最后找到一个解决的办法

如图所示，我用一个div进行包裹、事件绑定，就完美解决这个问题。