如何使点击ElementUI collapse 上的组件时不响应折叠/展开

情景：

点击折叠面板上的输入框时，会出现折叠面板也跟着响应的情况

方法：

可以在el-input外套一层div，监听这个div的点击事件，然后阻止冒泡事件。

输入框代码：

<template>
  <el-row >
    <el-col :span="6">
      <div class="elrow" @click='stopProp'>
      关键字：
      </div>
    </el-col>
    <el-col :span="18">
      <div class="grid-content bg-purple-light" @click='stopProp'>
        <el-input
          size="mini" class="searchinput" placeholder="请输入搜索关键字" v-model="input" clearable>
        </el-input>
      </div>
    </el-col>
  </el-row>

</template>

<script>
export default {
  name: 'searchBar',
  data () {
    return {
      input: ''
    }
  },
  methods: {
    // 阻止事件传播
    stopProp: function (e) {
      e.stopPropagation()
    }
  }
}
</script>

也就是在stopProp方法中使用 stopPropagation方法阻止冒泡事件。

参考：

https://segmentfault.com/q/1010000018072699

结语：

如有谬误，恳请斧正。