摘要：
今天，我遇到了一个问题。我实现了这样一个显示标题的垂直表格，如下所示。vue实现代码如下：tableComponent vue:＜template＞＜tableclass＝“mailTable”：style＝“styleObject”v-if＝“s_showByRow”＞＜trv for＝“indexinrowCount”＞＜tdclass＝“column”＞｛｛tableData[index*2-2].key｝｝＜/td＞＜td＞｛{tableData[index*2-2].value｝＞＜/td˃＜tdclass‘column’＞｛｝｛tableData[index*2-1]！
今天遇到一个问题，实现这样一个竖直的显示表头的表格，如下图。默认显示两列。
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: '北京市海淀区西北旺镇'}, ],
效果图如下：
