Elemenetplus+Vue3 实现纵向表头

 

<template>
  <el-table style="width: 100%" :data="DemoTableData" :show-header="false">
    <el-table-column v-for="(item, index) in DemoTableHeader" :key="index" :prop="item" >
      </el-table-column>
  </el-table>
</template>


<script setup>
import { ref } from 'vue'

const headers = [
  {
    prop: "date",
    label: "日期",
  },
  {
    prop: "name",
    label: "姓名",
  },
  {
    prop: "address",
    label: "地址",
  },
];
const 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 弄",
  },
];
const DemoTableHeader = getHeaders();
const DemoTableData = getValues();

function getHeaders() {
  return tableData.reduce(
      (pre, cur, index) => pre.concat(`value${index}`),
      ["title"]
  );
}

function getValues() {
  return headers.map((item) => {
    return tableData.reduce(
        (pre, cur, index) =>
            Object.assign(pre, {["value" + index]: cur[item.prop]}),
        {title: item.label}
    );
  });
}


</script>