ElementUI Collapse折叠面板更改展开icon位置

icon在右侧

咱们先来看官网中展开icon的位置，以下图

咱们会由于ui的设计，将icon放置在文本的左侧，咱们先看下element是否在该组件定义了相关的属性，找了一遍发现并无。
那么咱们若是实现以下图中的布局呢？

接着咱们经过观察element该组件中title的样式

发现了一种样式属性，flex。
有关flex的简单教程请参考阮一峰老师的这一篇
flex教程

咱们发现能够经过flex中的项目属性，对文本和icon进行排序

常规为了不修改到通用的组件（咱们可能只是修改部分的折叠面板collapse样式），须要添加一个外部的class，这里的事例就不添加了

// html
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.10.0/lib/index.js"></script>
    <div id="app">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item  name="1">
        <span class="collapse-title" slot="title">一致性 Consistency</span>
        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
        <div>在界面中一致：全部的元素和结构需保持一致，好比：设计样式、图标和文本、元素的位置等。</div>
      </el-collapse-item>
    </el-collapse>
    </div>
    // css
    @import url("//unpkg.com/element-ui@2.10.0/lib/theme-chalk/index.css");
    .collapse-title {
        flex: 1 0 90%;
        order: 1;
    }
    .el-collapse-item__header {
        flex: 1 0 auto;
        order: -1;
    }
    // js
    var Main = {
        data() {
          return {
            activeNames: ['1']
          };
        },
        methods: {
          handleChange(val) {
            console.log(val);
          }
        }
      }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

这里的文本须要用到slot，由于咱们须要给文本添加class，这里类名为collapse-title。
具体能够经过粘贴到codepen查看效果。