element-plus折叠面板箭头图标调整到最左边并且只有点击图片才展开内容

 实现效果：

html中内容：

<el-collapse accordion>
    <el-collapse-item name="1">
        <template #title>
            <span class="collapse-title">一致性 Consistency</span>
        </template>
        
        <div>text1</div>
        <div>text2</div>
    </el-collapse-item>
</el-collapse>

style内容：

:deep(.el-collapse-item__header){
    pointer-events: none;
    text-align:left    // 让文字靠左
    
}

:deep(.el-collapse-item__arrow){
    pointer-events: auto;
}


.collapse-title {
  flex: 1 0 90%;
  order: 1;
}

参考文章：

elementUI中折叠面板箭头图标位置调整到最左边_阿淼~的博客-CSDN博客

vue3中el-collapse-item不想点整个标题折叠和展开_宇乐多轩的博客-CSDN博客