vue中的横向排列_vue + ElementUI 的横向表格代码

{{tableData[index*2-2].key}}

{{tableData[index*2-2].value}}

{{tableData[index*2-1] !== undefined ? tableData[index*2-1].key : ‘‘}}

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

商品序号

{{tableData[index*2-2].index}}

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

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

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

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

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() {

return Math.ceil(this.tableData.length/2);

}

},

created() {

this.styleObject = this.tableStyle;

if(this.showByRow !== undefined){

this.s_showByRow = this.showByRow;

}

},

}

var Ctor = Vue.extend(Main)

new Ctor().$mount(‘#app‘)

.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 tr td.column { background-color: #EFF3F6; color: #393C3E; }

原文：https://www.cnblogs.com/lhqdbk/p/12206477.html