<!-- 横向表格处理 -->
<template>
  <div>
    <el-table :data="getValues" style="width: 100%" :show-header="false" border>
      <el-table-column align="center" v-for="(item, index) in getHeaders" :key="index" :prop="item">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      summaryTableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      summaryTableTitle: [
        {
          prop: "date", label: "日期"
        },
        {
          prop: "name", label: "姓名"
        },
        {
          prop: "address", label: "地址"
        },
      ],
    }
  },
  computed: {
    getHeaders() {
      return this.summaryTableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
    },
    getValues() {
      return this.summaryTableTitle.map((item) => {
        return this.summaryTableData.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { 'title': item.label })
      })
    }
  },
}
</script>