el-table 纵向垂直表头

<template><div class="element-main"><div> Element-ui 官方提供 table Demo</div><el-tableborderstyle="width: 100%":data="tableData"><el-table-column prop="courseName" label="课程信息" width="180"></el-table-column><el-table-column prop="courseBook" label="教材信息" width="180"></el-table-column><el-table-column prop="price" label="单价"></el-table-column></el-table><div>===================================== 分割线 =====================================</div><div>行列转换后的 Demo</div><el-tableborderstyle="width: 100%":data="getValues":show-header="false"><el-table-columnv-for="(item, index) in getHeaders":key="index":prop="item"></el-table-column></el-table></div>
</template><script>
export default {data() {return {headers: [{prop: 'courseName',label: '课程信息'},{prop: 'courseBook', label: '教材信息'},{prop: 'price',label: '单价'},],tableData:[{"courseId": 1,"courseName": "英语写作", "courseBook": "英语写作基础教程","price": 3500},{"courseId": 2,"courseName": "综合英语（三）",": "新编英语教程2","price": 3350}, {"courseId": 3,"courseName": "英语国家社会与文化","courseBook": "致用英语 英语国家概况 （第二版）","price": 2900 },{"courseId": 3,"courseName": "英语国家社会与文化","courseBook": "致用英语 英语国家概况 （第二版）","price": 2900,}],}},computed: {getHeaders() {return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])},getValues() {return this.headers.map(item => {return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});});}},
};
</script>

参考链接：https://www.jianshu.com/p/1f38eaffd070