1. 在使用element-ui的折叠面板时,点击标题栏的按钮不展开面板内容:

<el-collapse v-model="activeNames">
   <el-card class="box-card">
      <el-collapse-item>
          <template #title>
             <div class="projectItem">
                <div>
                   <!--面板标题-->
                   <p class="title">项目:{{ i.name }}</p>
                 </div>
                <div @click.stop="showCollapse()">
                   <el-button @click="onShowEditDialog(i, index)">编辑</el-button>
                   <el-button @click="onRemoveProject(i.id)">删除</el-button>
                 </div>
             </div>
           </template>
         </el-collapse-item>
   </el-card>
</el-collapse>

通过设置@click.stop="showCollapse()",阻止冒泡,点击按钮不再开展。

2. 想要改变折叠面板中icon位置

 找到折叠面板中icon位置,css设置如下:

.ep-collapse-item__arrow {
  flex: 1 0 auto;
  order: -1;
}

样式如下

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐