vue+ElementUI的横向表格代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="unpkg/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<template>
<div>
<table class="mailTable" : 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>
<td class="column">商品序号</td>
<td>{{tableData[index*2-2].index}}</td>
</tr>
</table>
<table class="mailTable" : v-else>
<tr v-for="index in rowCount">
<td class="column">{{tableData[index-1].key}}22</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>
</div>
</template>
</div>
</body>
<!-- import Vue before Element -->element表格横向滚动条
<script src="unpkg/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="unpkg/element-ui/lib/index.js"></script>
<script>
var Main = {
data() {
return {
styleObject: {},
s_showByRow: true,
tableData: [
{key: '单号', value: '1001',index: '1',},
{key: '商品名称', value: '篮球',index: '1'},
{key: '价格', value: '120.00', index: '1'},
{key: '订单⽇期', value: '2017-03-01', index: '1'},
{key: '付款⽅式', value: '在线⽀付', index: '1'},
{key: '收货地址', value: '北京市海淀区西北旺镇', index: '1'},
],
};
},
//props: ['tableData', 'tableStyle', 'showByRow'],
computed: {
rowCount: function() {
il(this.tableData.length/2);
}
},
created() {
this.styleObject = this.tableStyle;
if(this.showByRow !== undefined){
this.s_showByRow = this.showByRow;
}
},
}
var Ctor = d(Main)
new Ctor().$mount('#app')
</script>
<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 lumn { background-color: #EFF3F6; color: #393C3E; }
</style>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。