结果图片
在线预览地址：https://run.iviewui.com/JsVaE8cl
之前做的传统表格用到跨行，会在表格中再嵌套一个表格，代码很不美观，
所以这次用vue做了单个table，实现了这个功能：标题独立，左右的tr分开。
思路
<template>
<table
cellspacing="0"
border="1">
<!-- 顶部title -->
<tr>
<th>订单号</th>
<th>创建时间</th>
<th>订单内容</th>
<th>数量</th>
<th>订单金额</th>
<th>操作</th>
</tr>
<!-- 暂无数据时显示 -->
<tr v-if="!tableInfo">
<td :colspan="6">
暂无数据
</td>
</tr>
<!-- template不会被渲染 -->
<template v-for="(item,index) in tableInfo">
<!-- 左侧跨行区域 -->
<tr>
<td :rowspan="item.orderItemList.length+1">{{item.orderId}}</td>
<td :rowspan="item.orderItemList.length+1">{{item.createTime}}</td>
</tr>
<!-- 右侧数据 -->
<tr v-for="(child,index) in item.orderItemList">
<td>
{{child.content}}
</td>
<td>
{{child.quantity}}
</td>
<td>
{{child.money}}元
</td>
<!-- 右侧跨行数据 -->
<!-- 由于在遍历中所以只显示第一个 -->
<td :rowspan="item.orderItemList.length+1"
v-if="index == 0">
<Button type="primary" size="small">支付</Button>
<Button type="warning" size="small">取消</Button>
</td>
</tr>
</template>
</table>
</template>
<script>
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',
}
],
}],
}
}
}
</script>
<style scoped>
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;
}
</style>
图片.png
