实现一个竖直的显示表头的表格（vue版本）

Posted 2020-09-09 MartinL

今天遇到一个问题，实现这样一个竖直的显示表头的表格，如下图。默认显示两列。

vue实现代码如下：

 

tableComponent.vue：

 

<template>
  <table class="mailTable" :style="styleObject" v-if="s_showByRow">
    <tr v-for="index in rowCount">
      <td class="column">{{tableData[index*2-2].key}}</td>
      <td>{{tableData[index*2-2].value}}</td>
      <td class="column">{{tableData[index*2-1] !== undefined ? tableData[index*2-1].key : \'\'}}</td>
      <td>{{tableData[index*2-1] !== undefined ? tableData[index*2-1].value : \'\'}}</td>
    </tr>
  </table>
  <table class="mailTable" :style="styleObject" v-else>
    <tr v-for="index in rowCount">
      <td class="column">{{tableData[index-1].key}}</td>
      <td>{{tableData[index-1].value}}</td>
      <td class="column">{{tableData[rowCount+index-1] !== undefined ? tableData[rowCount+index-1].key : \'\'}}</td>
      <td>{{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;
    if(this.showByRow !== undefined){
      this.s_showByRow = this.showByRow;
    }
  },
}
</script>

 补充css：

<style>
　　.mailTable, .mailTable tr, .mailTable tr td{ border:1px solid #E6EAEE; }
　　.mailTable{ font-size: 12px; color: #71787E; }
　　.mailTable tr td{ border:1px solid #E6EAEE; width: 150px; height: 35px; line-height: 35px; box-sizing: border-box; padding: 0 10px; }
　　.mailTable tr td.column { background-color: #EFF3F6; color: #393C3E; }
</style>

 

 

引用时如下：

 

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

 

数据tableData格式如下：

 

      tableData: [
        {key: \'单号\', value: \'1001\'},
        {key: \'商品名称\', value: \'篮球\'},
        {key: \'价格\', value: \'120.00\'},
        {key: \'订单日期\', value: \'2017-03-01\'},
        {key: \'付款方式\', value: \'在线支付\'},
        {key: \'收货地址\', value: \'北京市海淀区西北旺镇\'},
      ],

 

效果图如下：