先看一下修改后的效果

修改前el-collapse效果

对比一下
原版el-collapse的icon在右边,而我们UI设计是在最左边,而且右边还要加上此el-collapse-item的长度。
实现思路
用flex-dirction: row-reverse反转。然后用justify-content将内容放到左边,但这样也会让显示el-collapse-item长度放左边,这时加上一个margin-left:auto就可以解决。
.collapse-title {
display: flex;
&-length {
margin-left: auto;
margin-right: 14px;
}
}
/deep/ .el-collapse-item__content {
padding: 0;
}
/deep/ .el-collapse-item__arrow {
margin: 4px 4px 4px 12px;
}
/deep/ .el-collapse-item__header {
color: $blue;
height: 40px;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
<el-collapse>
<template v-for="(item, key) in arr">
<el-collapse-item
:key="key"
:disabled="item.length == 0"
>
<template slot="title" class="collapse-title">
<div class="collapse-title-length">
{{ item.length }}
</div>
<div>
...
</div>
</template>
</el-collapse-item>
</template>
</el-collapse>
记住: 显示右边length的div一定要在显示左边文字div上面写。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步