关于前端:element框架的teble表格的数据展示由横向转向竖向

<template>
    <div class="m50">

        <el-table border style="margin-top: 50px;" :data="originData">
            <el-table-column label="题型" property="type" align="center">
            </el-table-column>
            <el-table-column label="数量" property="num" align="center">
            </el-table-column>
            <el-table-column label="均分" property="average" align="center">
            </el-table-column>
        </el-table>

        <!-- 转化后 -->
        <el-table border style="margin-top: 50px;" :data="transData.slice(1)">
            <el-table-column v-for="(item, index) in transData[0]" :label="item" :key="index" align="center">
                <template slot-scope="scope">
                    {{scope.row[index]}}
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
    export default {data() {
            return {
                // originData 为后端原始失常的数据, 此数据按失常表格展现 一行一行的数据
                // 保障数组里每一个对象中的字段程序, 从上到下 一次对应显示表格中的从左到右
                originData: [{
                        type: '选择题',
                        num: '5 题',
                        average: '3 分 / 题',
                    },
                    {
                        type: '填空题',
                        num: '5 题',
                        average: '3 分 / 题',
                    },
                    {
                        type: '选择题',
                        num: '2 题',
                        average: '10 分 / 题',
                    }
                ],
                originTitle: ['题型', '数量', '均分'], // originTitle 该题目为 失常显示的题目, 数组中的程序就是下面数据源对象中的字段题目对应的程序
                transData: []}
        },
        created() {
            // 数组按矩阵思路, 变成转置矩阵
            let matrixData = this.originData.map((row) => {let arr = []
                for (let key in row) {arr.push(row[key])
                }
                return arr
            })
            console.log(matrixData)
            // 退出题目拼接最终的数据
            this.transData = matrixData[0].map((col, i) => {return [this.originTitle[i], ...matrixData.map((row) => {return row[i]
                })]
            })
            console.log(this.transData)
        }
    }
</script>
<style lang="scss" scoped>
    .m50 {margin: 50px;}
</style>