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: '尼古拉斯赵四'}
          ],
    
  • 相关阅读:
    记录——framework探测定位程序集与core探测定位程序集
    C# 特定框架适用特定代码
    python读取excel代码
    时间比较
    ORA 01791错误
    MongoDB.1什么是MongoDB
    Mayatis 异常之result maps collection already contains value...
    怎样做好黄焖鸡
    关于foreach
    C#之out,ref关键字
  • 原文地址:https://www.cnblogs.com/muqiao/p/10184377.html
Copyright © 2011-2022 走看看