今天遇到一个问题，实现这样一个竖直的显示表头的表格，如下图。
vue实现代码如下：
构建tableComponent.vue组件：
<template>
<table class="mailTable" :style="styleObject" v-if="s_showByRow">
<tr v-for="index in rowCount">
<td class="column">{
{tableData[index*3-3].key}}</td>
<td>{
{tableData[index*3-3].value}}</td>
<td class="column">{
{tableData[index*3-2] !== undefined ? tableData[index*3-2].key : ''}}</td>
<td>{
{tableData[index*3-2] !== undefined ? tableData[index*3-2].value : ''}}</td>
<td class="column">{
{tableData[index*3-1] !== undefined ? tableData[index*3-1].key : ''}}</td>
<td>{
{tableData[index*3-1] !== undefined ? tableData[index*3-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/2+index-1] !== undefined ? tableData[rowCount/2+index-1].key : ''}}</td>
<td>{
{tableData[rowCount/2+index-1] !== undefined ? tableData[rowCount/2+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() {
//设置为几列数据就除以几。通过td tr模拟表格
return Math.ceil(this.tableData.length/3);
}
},
created() {
this.styleObject = this.tableStyle;
if(this.showByRow !== undefined){
this.s_showByRow = this.showByRow;
}
},
}
</script>
<style>
.mailTable, .mailTable tr, .mailTable tr td{ border:1px solid #E6EAEE; }
.mailTable{ font-size: 10px; color: #71787E; width:100%; height:100%;}
.mailTable tr td{ border:1px solid #E6EAEE; width: 15%; height: 76px; box-sizing: border-box; padding: 0 10px; }
.mailTable tr td.column { background-color: #EFF3F6; color: #000000; }
</style>
引用如下：
<template>
<div>
<Card>
<Row>
<Col>
<div>
<mail-table :tableData="tableData"></mail-table>
</div>
</Col>
</Row>
</Card>
</div>
</template>
<script>
//引用存放的路径
import mailTable from '../loan-audit/tableComponent'
export default {
name: "loanAuditVin1",
//引入组件
components: {
mailTable,
},
data() {
return {
summaryVisible: false,
//数据tableData格式如下：
tableData: [
{key: '发证日期', value: ''},
{key: '车辆型号', value: '飞碟缔途 MX 乐享版 1.5L 108马力 汽油/CNG 3.6米单排箱式微卡(FD5030XXYD66K5-S1)'},
{key: '车辆识别代号/车架号', value: 'LZOB4J25K1075944'},
{key: '发动机型号', value: 'DK15-02G/N'},
{key: '发动机号', value: '1951753'},
{key: '排量和功率', value: '1.499/80'},
{key: '排放标准', value: '北京市海淀区西北旺镇'},
{key: '油耗', value: '北京市海淀区西北旺镇'},
{key: '外部尺寸', value: '北京市海淀区西北旺镇'},
{key: '货箱内部尺寸', value: '北京市海淀区西北旺镇'},
{key: '钢板弹簧片数', value: '北京市海淀区西北旺镇'},
{key: '轮胎数', value: '北京市海淀区西北旺镇'},
{key: '轮胎规格', value: '北京市海淀区西北旺镇'},
{key: '轮距（前、后）', value: '北京市海淀区西北旺镇'},
{key: '轴距', value: '北京市海淀区西北旺镇'},
{key: '总质量', value: '北京市海淀区西北旺镇'},
{key: '整备质量', value: '北京市海淀区西北旺镇'},
{key: '驾驶室准乘人数（人）', value: '北京市海淀区西北旺镇'},
{key: '车辆制造商日期', value: '北京市海淀区西北旺镇'},
{key: '是否库存车', value: '北京市海淀区西北旺镇'},
],
}
},
}
</script>效果图如下：
