先看一下修改后的效果

修改前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上面写。
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~