el-table如何实现纵向垂直表头？

项目遇到一个需求，echarts绘制的多条折线图表因为需要打印到A4纸上面，所以需要用表格把各个点的数据展示出来，这时候就需要垂直表头的表格。

而看element-ui的官方API，可以看出都是正常的横向表头表格，没有纵向的垂直表头的示例。。。

那改如何实现需求呢？我们需要实现以下2个功能

1. 隐藏原有横向表头
2. 横向表头转换为纵向表头

查看官方table的实现源码，发现有个show-header属性可以去控制表头是否显示！ 那么:show-header="false"隐藏表头 get~

接下来我们就需要把正常的横向表头数据转换为纵向表格数据，思路如下：

原来的纵表改为横表以后，我们的第一列就是 title 第二列开始往后都将是 value 但是我们并不知道有多少个 value，所以我们需要通过这种方式来动态的去生成表头，不能使用原来的表头了

<div class="element-main">
    <div> Element-ui 官方提供 table Demo</div>
    <el-table
      style="width: 100%"
      :data="tableData"
    >
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    <div>===================================== 分割线 =====================================</div>
    <div>行列转换后的 Demo</div>
    <el-table
      style="width: 100%"
      :data="getValues()"
      :show-header="false"
    >
      <el-table-column
        v-for="(item, index) in getHeaders()"
        :key="index"
        :prop="item"
      >
      </el-table-column>
    </el-table>
  </div>

js代码

data() {
  return {
    headers: [
      {
        prop: 'date',
        label: '日期',
      },
      {
        prop: 'name',
        label: '姓名',
      },
      {
        prop: 'address',
        label: '地址',
      },
    ],
    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 弄'
      }
    ]
  }
},
computed: {
  getHeaders() {
  //["title", "value0", "value1", "value2", "value3"]
    return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
  },
  getValues() {
  //[ {title: "日期", value0: "2016-05-02", value1: "2016-05-04", value2: "2016-05-01", value3: "2016-05-03"} ]
    return this.headers.map(item => {
      return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});
    });
  }
},