当前位置:   article > 正文

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

elementui折叠面板

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

  1. <el-collapse v-model="activeNames">
  2. <el-card class="box-card">
  3. <el-collapse-item>
  4. <template #title>
  5. <div class="projectItem">
  6. <div>
  7. <!--面板标题-->
  8. <p class="title">项目:{{ i.name }}</p>
  9. </div>
  10. <div @click.stop="showCollapse()">
  11. <el-button @click="onShowEditDialog(i, index)">编辑</el-button>
  12. <el-button @click="onRemoveProject(i.id)">删除</el-button>
  13. </div>
  14. </div>
  15. </template>
  16. </el-collapse-item>
  17. </el-card>
  18. </el-collapse>

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

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

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

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

样式如下

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/码创造者/article/detail/971918?site
推荐阅读
相关标签
  

闽ICP备14008679号