for循环使用element的折叠面板遇到的问题-1

Posted 2020-11-23 yanyanliu

首先，效果是点击添加折叠面板，折叠面板的title右侧是关闭的小按钮，每次添加的面板都自动展开，其他的面板自动关闭，但其中发现一个问题是，每次点击关闭的时候，虽然上一个面板被关闭了，但他的下一个会自动打开，想把这个问题解决就发现是冒泡时间，当点击的时候会冒泡，误以为是点击展开，所以vue里边有个阻止冒泡事件，使用

@click.stop="close(item,index)"

 <el-collapse accordion>
      <el-collapse-item v-for="(item,index) in collapseData" :key="index">
        <template slot="title">
          {{item.name}}
          <i class="ssf ssf-colse" @click.stop="close(item,index)"></i>    
          <!-- 因为项目需要要在每个折叠面板右侧添加关闭按钮，这样用定位放在右侧即可 -->
        </template>
        <div>{{item.content}}</div>
      </el-collapse-item>
    </el-collapse>