實現縱向表頭的table

組件代碼

<template>
  <table class="mailTable" :style="styleObject">
    <th >收款單位(人)</th>
    <tr v-for="index in rowCount" :key="index">
      <td class="column">{{ tableData[index-1].key }}</td>
      <td class="column">{{ tableData[index-1].value }}</td>
      <td class="column"
      >{{ tableData[rowCount+index-1] !== undefined ? tableData[rowCount+index-1].key : '' }}</td>
      <td class="column">{{ tableData[rowCount+index-1] !== undefined ? tableData[rowCount+index-1].value : '' }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data () {
    return {
      styleObject: {},
      s_showByRow: true
    }
  },
  props: ['tableData', 'tableStyle', 'showByRow'],
  computed: {
    rowCount: function () {
      return Math.ceil(this.tableData.length / 2)
    }
  },
  created () {
    this.styleObject = this.tableStyle
  }
}
</script>
<style lang="scss" scoped>
.mailTable {
  margin: 0 auto;
}
.column {
  height: 54px;
  border: 1px solid #e8e8e8;
  text-align: center;
}
</style>

在頁面引用組件

<mailTable :tableData="tableData" :tableStyle="{ width:'600px' }"></mailTable>

數據結構

      tableData: [
        {key: '開戶行', value: '1001'},
        {key: '申請金額合同占比', value: '10'},
        {key: '合同編號', value: '11010110'},
        {key: '賬號', value: '1029303'},
        {key: '申請金額', value: '29999'},
        {key: '申請人', value: '尼古拉斯趙四'}
      ],