實現縱向表頭的table
阿新 • • 發佈:2018-12-27
元件程式碼
<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="{ width:'600px' }"></mailTable>
資料結構
tableData: [ {key: '開戶行', value: '1001'}, {key: '申請金額合同佔比', value: '10'}, {key: '合同編號', value: '11010110'}, {key: '賬號', value: '1029303'}, {key: '申請金額', value: '29999'}, {key: '申請人', value: '尼古拉斯趙四'} ],