需求背景

使用collapse折叠面板, 折叠面板的title使用的自定义内容, 里面包含一个按钮

遇到问题

点击按钮, 按钮事件生效, 但同时, 折叠面板的title点击事件也生效(即, 面板折叠或者展开了)

期望效果

点击按钮, 折叠面板的title点击事件不生效

实现

<el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item name="1">
    <template slot="title">
      自定义title
      <div @click="stopProp">
        <el-button size="mini" type="primary">我是按钮</el-button>
      </div>
    </template>
    <div>这里是展开内容</div>
  </el-collapse-item>
  <el-collapse-item title="非自定义title" name="2">
    <div>vue+elementUI中Collapse的title自定义如何阻止冒泡事件</div>
  </el-collapse-item>
</el-collapse>
<script>
  export default {
    data() {
      return {
        activeNames: ['1']
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      //阻止冒泡事件
      stopProp(e) {
        e.stopPropagation()
      }
    }
  }
</script>

附上效果图: