table同时实现跨行跨列

table同时实现跨行跨列的效果：
 

HTML代码如下：

<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>

 

总结

希望对于要实现这种效果的老铁有帮助。