0


element UI中的折叠面板(el-collapse)点击icon和标题展开

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;
}

样式如下


本文转载自: https://blog.csdn.net/m0_52761651/article/details/127024965
版权归原作者 欢喜~999 所有, 如有侵权,请联系我们删除。

“element UI中的折叠面板(el-collapse)点击icon和标题展开”的评论:

还没有评论