首页 > 代码库 > 实现一个竖直的显示表头的表格（vue版本）
实现一个竖直的显示表头的表格（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>
引用时如下：
<mailTable :tableData="tableData" :tableStyle="{ width:‘600px‘ }"></mailTable>
数据tableData格式如下：
tableData: [ {key: ‘单号‘, value: ‘1001‘}, {key: ‘商品名称‘, value: ‘篮球‘}, {key: ‘价格‘, value: ‘120.00‘}, {key: ‘订单日期‘, value: ‘2017-03-01‘}, {key: ‘付款方式‘, value: ‘在线支付‘}, {key: ‘收货地址‘, value: ‘北京市海淀区西北旺镇‘}, ],
效果图如下：
实现一个竖直的显示表头的表格（vue版本）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。