element-ui collapse 折叠面板有什么方法可以点击表头阻止冒泡或者不打开

Question

<el-collapse accordion>
  <el-collapse-item>
    <template slot="title">
        <div v-show="status">{{title}}</div>
        <el-input v-show="!status" v-model="title" placeholder="请输入标题"></el-input>
    </template>
  </el-collapse-item>
</el-collapse>

这是可编辑的title 当每次点击input的时候 折叠面板也会关闭打开 有什么方法可以阻止一下

Answer 1

在el-input外在套一层div，监听这个div的点击事件，然后阻止冒泡事件，可以参考一下下面的例子。
https://jsfiddle.net/k1queda9/

Answer 2

// html
<el-input v-show="!status" v-model="title" placeholder="请输入标题" v-on:click.native.stop='doSomething'></el-input>

// js
 methods: {
      doSomething: function() {
        console.log('阻止事件继续传播')
    }
  }