结果图片
在线预览地址: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