table同时实现跨行跨列的效果:
<div id="app">
<table cellpadding="0" cellspacing="0" class="ptable detail_new_dialg_table">
<tr class="dialg_table_th">
<th style="width:200px;">商品</th>
<th style="width:600px;">日期</th>
<th style="width:100px;">数量</th>
</tr>
<tbody v-for='(item,index) in textArr'>
<tr>
<td width="130" class="border_line" colspan="3">{{item.type}}</td>
</tr>
<template v-for="(itemChild,indexChild) in item.genres">
<tr v-for="(detail,detailIndex) in itemChild.dataChild" >
<td :rowspan="(itemChild.dataChild).length" v-if="detailIndex === 0">{{itemChild.commodity}}</td>
<td>{{detail.date}}</td>
<td>{{detail.price}}</td>
</tr>
</template>
</tbody>
</table>
</div>
js代码如下:
<script>
new Vue({
el: '#app',
data: {
textArr: [
{
type:"肉类",
genres:[
{
commodity:'大排骨',
dataChild:[
{
date:'2010-9-17',
price:'2'
},
{
date:'2010-9-18',
price:'13'
},
{
date:'2010-9-19',
price:'45'
},
]
},
{
commodity:'丸子类',
dataChild:[
{
date:'2010-9-17',
price:'3'
},
{
date:'2010-9-18',
price:'54'
},
{
date:'2010-9-19',
price:'5'
},
]
}
],
},
{
type:"蔬菜",
genres:[
{
commodity:'蔬菜1',
dataChild:[
{
date:'2010-9-17',
price:'6'
},
{
date:'2010-9-18',
price:'12'
},
{
date:'2010-9-19',
price:'34'
},
]
},
{
commodity:'蔬菜2',
dataChild:[
{
date:'2010-9-17',
price:'82'
},
{
date:'2010-9-18',
price:'33'
},
{
date:'2010-9-19',
price:'54'
},
]
}
],
}
],
}
})
</script>
总结
希望对于要实现这种效果的老铁有帮助。
转载于:https://blog.csdn.net/W1998280/article/details/108668610