zoukankan      html  css  js  c++  java
  • 实现一个竖直的显示表头的表格(vue版本)

    今天遇到一个问题,实现这样一个竖直的显示表头的表格,如下图。默认显示两列。
    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="{ '600px' }"></mailTable>
    数据tableData格式如下:
     
          tableData: [
            {key: '单号', value: '1001'},
            {key: '商品名称', value: '篮球'},
            {key: '价格', value: '120.00'},
            {key: '订单日期', value: '2017-03-01'},
            {key: '付款方式', value: '在线支付'},
            {key: '收货地址', value: '北京市海淀区西北旺镇'},
          ],
    效果图如下:
     
     
  • 相关阅读:
    angularjs
    HTML5
    Java Concurrency —— 《Java并发编程实战》读书笔记
    java IO
    Struts2 文件上传下载
    SQL join
    Annotation
    if表达式
    Ext js 下拉框下拉的同时输入模糊查询
    JSP如何把一个页面的值传到另一个页面
  • 原文地址:https://www.cnblogs.com/martinl/p/6696273.html
Copyright © 2011-2022 走看看