【折叠面板】点击ElementUI collapse 上的标题时面板不响应折叠/展开

1.点击组件的标题时控制面板不展开，点击右侧箭头面板展开。

方法一：可以通过样式去控制

<style lang="scss" scoped>

  :deep(.el-collapse-item__header) {

    pointer-events: none;

  }

  :deep(.el-collapse-item__arrow) {

    pointer-events: auto;

  }

</style>

2.折叠面板标题加按钮，点击不让面板展开。

方法一：加事件冒泡阻止

<template>
  <div class="demo-collapse">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item  name="1">
        <template v-slot:title>
               不展开 <el-button type="primary" @click.stop.prevent=handle()>点击不展开</el-button>
                  </template>
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
  console.log(val)
}
const handle=()=>{
  console.log('点击头部')
}
</script>

3.隐藏右侧箭头，且改变箭头方向。

<style lang="scss" scoped> 
 :deep(.el-collapse-item__arrow) {

     pointer-events: auto;//显示
     display: none;//隐藏icon
    transform: rotate(270deg); /* 修改箭头方向 */


  }
  :deep(.el-collapse-item__arrow.is-active ){
    transform: rotate(90deg);/* 修改箭头方向 */
}
</style>