实现一个横向的表格

对于横向对比字段值的场景，实现一个横向的表格，每一列是一条数据，表头是后端返回的。

 //后端返回的数据
    data =[
      {name:"张三" ,age:21 , source:100 ,chinese:30},
      {name:"李四" ,age:22 , source:90 ,chinese:20},
      {name:"王五" ,age:21 , source:100 ,chinese:40},
      ]

展示为：

 <el-table :data="column" border class="table-box">
      <el-table-column prop="label" label="" width="120" fixed  align="center"/>
      <el-table-column
        v-for="(item, index) in textList"
        :key="index"
        :label="item.name"
        align="center">
        <template #default="{ row }">
          {{ row.values[index] }}
        </template>
      </el-table-column>
    </el-table>
  <script setup>
   const textList = ref([
      { name: "张三", age: 21, source: 100, chinese: 30 },
      { name: "李四", age: 22, source: 90, chinese: 20 },
      { name: "王五", age: 21, source: 100, chinese: 40 },
    ]);
    const colMap = ref({
      source: "总成绩",
      chinese: "语文",
      age: "年龄",
    });
    const column = computed(() => {
      const keys = Object.keys(textList.value[0]);
      return keys
        .filter((item) => item != "name")
        .map((key) => {
          return {
            label: colMap.value[key] || "",
            values: textList.value.map((item) => item[key]),
          };
        });
    });

 </script>