python怎么实现跨列_Vue 实现跨行表格

结果图片

在线预览地址：https://run.iviewui.com/JsVaE8cl

之前做的传统表格用到跨行，会在表格中再嵌套一个表格，代码很不美观，

所以这次用vue做了单个table，实现了这个功能：标题独立，左右的tr分开。

思路

cellspacing="0"

border="1">

订单号创建时间订单内容数量订单金额操作

暂无数据

{{item.orderId}}{{item.createTime}}

{{child.content}}

{{child.quantity}}

{{child.money}}元

v-if="index == 0">

支付

取消

export default {

data(){

return{

// 数据格式

tableInfo:[{

orderId:'002111000',

amount:'5300',

createTime:'2018-11-01 17:40:25',

orderItemList:[

{

id:'113',

content:'续费三年',

quantity:'1',

money:'3800',

},

{ id:'114',

content:'购买10个账号',

quantity:'1',

money:'1500',

}

],

},{

orderId:'002111001',

amount:'2500',

createTime:'2018-11-01 17:20:25',

orderItemList:[

{

id:'112',

content:'续费一年',

quantity:'1',

money:'1000',

},

{ id:'114',

content:'购买10个账号',

quantity:'1',

money:'1500',

}

],

},{

orderId:'002111002',

amount:'1000',

createTime:'2018-11-01 17:10:25',

orderItemList:[

{

id:'111',

content:'续费一年',

quantity:'1',

money:'1000',

}

],

}],

}

}

}

table{

margin-top: 15px;

width: 100%;

border:1px solid #e9eaec;

border-collapse:collapse

}

th{

background-color: #f8f8f9;

}

th,td{

padding: 5px;

border: 1px solid #e9eaec;

text-align: center;

vertical-align: top;

line-height: 30px;

}

图片.png