在某些需求里需要用到 行列转置 的表格，但 el-table 提供的基本表格是不支持行列转置的，这样就需要对这个表格进行二次开发。下面来看具体实现的效果：

具体实现方式

基本原理就是对原有的可渲染的数据结构进行处理，表头与表格数据要按动态的数据去处理。这里我们提供了两种方式去实现：
原数据格式：

tableHead:  [{prop: 'date',label: '日期',},{prop: 'name',label: '姓名',},{prop: 'address',label: '地址',},],
tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]

第一种：
初始化页面时对数据进行手动循环处理，html 部分借助 template 渲染，缺点是处理略复杂，具体代码如下(只摘抄了关键代码，省略了 vue 的基本结构)：

<el-table border:data="tableDataNew" ><el-table-columnv-for="(item, index) in columnData":key="index":prop="item.prop":label="item.label"><template slot-scope="{ row }"><div>{{ row[item.prop] }}</div></template></el-table-column></el-table>mounted(){this.init()},init() {const columnObj = {} //创建标题数组中第一个对象columnObj.label = '日期'//第一个标题名称columnObj.prop = 'title'//第一个标题名称对应的字段this.columnData.push(columnObj) //第一个标题 放入标题数组中this.tableDataNew.push({ 'title': '姓名' })this.tableDataNew.push({ 'title': '地址' })let _this = this;var props = 'prop' //自定义字段名称this.tableData.forEach((item, index) => {const columnObj = {}columnObj.label = item.date// 每一列的标题的名称columnObj.prop = props + index //自定义每一列标题字段名称_this.columnData.push(columnObj)this.$set(this.tableDataNew[0], columnObj.prop, item.name)this.$set(this.tableDataNew[1], columnObj.prop, item.address)})}

第二种：
借助 computed 计算属性、 reduce 函数实现数据处理，但是隐藏了原来的表头，增加了样式处理的成本，优点是处理逻辑比较简单。

<el-tablestyle="width: 100%":data="tableDataNew":show-header="false"><el-table-columnv-for="(item, index) in columnData":key="index":prop="item"></el-table-column></el-table>computed: {columnData() {return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])},tableDataNew() {return this.tableHead.map(item => {return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label});});}},

处理之后的表格数据格式：

columnData:["title", "value0", "value1", "value2", "value3"]tableDataNew:["title", "value0", "value1", "value2", "value3"] 

到这里两种方式就介绍完了，大家可以尝试，如果有更好的方式，欢迎大家不吝赐教。