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">
            <el-table-column v-for="(item, index) in transTitle" :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 該標題為 正常顯示的標題, 數組中的順序就是上面數據源對象中的字段標題對應的順序
                transTitle: ['', '學生1', '學生2', '學生3'], // transTitle 該標題為轉化后的標題, 注意多一列,  因為原來的標題變成了豎着顯示了, 所以多一列標題, 第一個為空即可
                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>