背景

element-ui上的折叠组件（collapse）有的时候我们需要为组件进行不同的布局来达到我们项目的需要，比如我想要在折叠面板标题的右侧添加一个“审核”的按钮，当这个折叠面板处于展开时如果进行点击动作则不进行收缩+完成对应的事件处理；当这个折叠面板处于折叠时如果进行点击动作则不进行展开+完成对应的事件处理；
核心思路：利用阻止事件冒泡的机制

代码

<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="test1">
        <template slot="title">
          <div class="left">
            一致性 Consistency<i class="header-icon el-icon-info"></i>
          </div>
          <div class="right">
            <el-button
              type="primary"
              size="mini"
              @click.stop="handleApprovalClick"
              >审核</el-button
            >
          </div>
        </template>
        <div>
          与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
        </div>
        <div>
          在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
        </div>
      </el-collapse-item>
      <el-collapse-item title="反馈 Feedback" name="test2">
        <div>
          控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
        </div>
        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      activeNames: ['test1'],
    }
  },
  methods: {
    handleApprovalClick() {
      console.log('进行审核结果的处理')
      console.log('这里已经阻止冒泡事件的传播了')
    },
  },
}
</script>

<style scoped lang="less">
.el-collapse-item__header {
  .left {
    flex: 1;
  }
  .right {
    width: 300px;
  }
}
</style>

效果图

参考文章

https://segmentfault.com/q/1010000018072699