先看一下修改后的效果

修改前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上面写。

el-collapse header修改

原文：https://www.cnblogs.com/naxwnm/p/14153165.html