zoukankan      html  css  js  c++  java
  • 实现纵向表头的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="{ '600px' }"></mailTable>
    

    数据结构

          tableData: [
            {key: '开户行', value: '1001'},
            {key: '申请金额合同占比', value: '10'},
            {key: '合同编号', value: '11010110'},
            {key: '账号', value: '1029303'},
            {key: '申请金额', value: '29999'},
            {key: '申请人', value: '尼古拉斯赵四'}
          ],
    
  • 相关阅读:
    【Java】REST风格
    KMP(烤馍片)算法
    Lca求法 (树链剖分 与 倍增)
    hash学习笔记
    星际网络(数学)
    P3537 [POI2012]SZA-Cloakroom (背包)
    乘车路线 (二维最短路)
    渔民的烦恼 (二分)
    Jmeter 常用函数(18)- 详解 __isDefined
    Jmeter 常用函数(17)- 详解 __substring
  • 原文地址:https://www.cnblogs.com/muqiao/p/10184377.html
Copyright © 2011-2022 走看看