el-collapse header修改

先看一下修改后的效果

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