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查看效果。