el-table表头竖向排在第一列

<template>
  <div>
    <div class="title">
      <h3>尺码详情</h3>
    </div>
    <el-divider></el-divider>
    <el-table style="width: 300px" :data="getValues" :show-header="false">
      <el-table-column
        v-for="(item, index) in getHeaders"
        :key="index"
        :prop="item"
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  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.value] }),
          { title: item.label }
        );
      });
    },
  },
  data() {
    return {
      tableData: [
        { size1: "160/74A", size2: "XS", size3: "201" },
        { size1: "165/72A", size2: "S", size3: "202" },
        { size1: "170/76A", size2: "M", size3: "203" },
      ],
      headers: [
        { label: "号型", value: "size1" },
        { label: "规格", value: "size2" },
        { label: "尺码编码", value: "size3" },
      ],
    };
  },
};
</script>