html表头纵向,实现纵向表头的table

组件代码

{{ tableData[index-1].key }}

{{ tableData[index-1].value }}

>{{ tableData[rowCount+index-1] !== undefined ? tableData[rowCount+index-1].key : ‘‘ }}

{{ tableData[rowCount+index-1] !== undefined ? tableData[rowCount+index-1].value : ‘‘ }}

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

}

}

.mailTable {

margin: 0 auto;

}

.column {

height: 54px;

border: 1px solid #e8e8e8;

text-align: center;

}

在页面引用组件

数据结构

tableData: [

{key: ‘开户行‘, value: ‘1001‘},

{key: ‘申请金额合同占比‘, value: ‘10‘},

{key: ‘合同编号‘, value: ‘11010110‘},

{key: ‘账号‘, value: ‘1029303‘},

{key: ‘申请金额‘, value: ‘29999‘},

{key: ‘申请人‘, value: ‘尼古拉斯赵四‘}

],