Vue2/element-ui 实现el-table表头纵向显示效果

实际效果：

实现过程：

前提条件：从后端接收到的返回体perf_yearly，格式为：

是一个嵌套对象，首先要将其转化为el-table支持的数据类型——数组。

官方文档示例中的数据格式，是一个对象数组。

this.yearList = Object.keys(response.perf_yearly.Calmar);//随便找perf_yearly中的一个对象，提取出年份
this.perf_yearly = Object.values(response.perf_yearly);//转化为对象数组，方便el-table组件读取值
this.perf_yearlyColumnList = Object.keys(response.perf_yearly);//将返回体中的perf_yearly对象属性名提取为数组

这样一来，perf_yearly的所有属性名与内部对象的属性名也成为了数组，存储在perf_yearlyColumnList与yearList中。

接下来的思路很简单：perf_yearly中的每一个元素对应一个属性在所有年份的值，因此按列打印即可；然后再将perf_yearlyColumnList中的所有属性名打印在第一列进行对应。
 

<el-table class="statusInfo" v-if="perf_yearly" :data="perf_yearly">
    <el-table-column>
        <template slot-scope="scope">
			{{ perf_yearlyColumnList[scope.$index] }}
		</template>
	</el-table-column>
	<el-table-column v-for="(item,index) in yearList" :key="index" :label="item" :prop="item">
	</el-table-column>
</el-table>

此处涉及到在一个el-table组件内调用两个数组数据的操作：用插槽读取当前索引值，然后调用另一个数组来直接进行显示。

如果perf_yearly中的对象内属性名并不相同，可以把prop设为index，通过索引而不是属性名来读取数据。