vue 使用 v-for 让 table 纵向展开分组

需要展现这样一个表格

分析：
需要循环展开每排表格，同时行上有分组，
采用行模板模式 table的 tbody 带 template
代码：
template：

<template>
  <div id="sketchMap">
    <h4>库位码</h4>
    <section id="sketchTable">
      <table v-for = "(group,index) in groups" :key="index">
        <thead>
        <tr>
            <th></th>
            <th>{{group.name}}</th>
            <th :colspan="group.span">库位</th>
        </tr>
        </thead>
        <tbody>
            <template v-for="(lay) in group.lays" >
                <tr :key=lay.name>
                    <td></td>
                    <td>{{lay.name+"层"}}</td>
                    <td v-for= "(id) in lay.cellIds" :key="id">{{id}}</td>                
                </tr>
                <tr :key="'m_'+group.name+lay.name">
                    <td>物料名称</td>
                    <td></td>
                    <td :class="[matieralData[id]?(matieralData[id].isChecked?'checked':'uncheck'):'']" v-for= "(id) in lay.cellIds" :key="id">{{matieralData[id]? matieralData[id].materialName:""}}</td>                
                </tr>
                <tr :key="'c_'+group.name+lay.name">
                    <td>物料批次号</td>
                    <td></td>
                    <td :class="[matieralData[id]?(matieralData[id].isChecked?'checked':'uncheck'):'']" v-for= "(id) in lay.cellIds" :key="id">{{matieralData[id]?matieralData[id].materialCode:""}}</td>                
                </tr>
                <tr :key="'s_'+group.name+lay.name">
                    <td>总量</td>
                    <td></td>
                    <td :class="[matieralData[id]?(matieralData[id].isChecked?'checked':'uncheck'):'']" v-for= "(id) in lay.cellIds" :key="id">{{matieralData[id]?matieralData[id].wight:""}}</td>                
                </tr>
            </template>
         
        </tbody>

      </table>
    </section>
  </div>
</template>

注：如果数据中有undefined情况，在页面上，使用 ，matieralData[id]?matieralData[id].wight:"" ，使用三目表达式转换
javascript

<script>
export default {
    data(){
        return {
        //表头数据
           groups:[
               {name:"A排", span:14,lays:[{"name":3,"cellIds":[103,113,123,133,143,153,163,173,183,193,203,213,223,233]},
                                 {"name":2,"cellIds":[102,112,122,132,142,152,162,172,182,192,202,212,222,232]},
                                 {"name":1,"cellIds":[101,111,121,131,141,151,161,171,181,191,201,211,221,231]},
                                ]},
               {name:"B排",span:14,lays:[{"name":3,"cellIds":[243,253,263,273,283,293,303,313,323,333,343,353,363,373]},
                                 {"name":2,"cellIds":[242,252,262,272,282,292,302,312,322,332,342,352,362,372]},
                                 {"name":1,"cellIds":[241,251,261,271,281,291,301,311,321,331,341,351,361,371]},
                                ]},
               {name:"C排",span:14,lays:[{"name":3,"cellIds":[383,393,403,413,423,433,443,453,463,473,483,493,503,513]},
                                 {"name":2,"cellIds":[382,392,402,412,422,432,442,452,462,472,482,492,502,512]},
                                 {"name":1,"cellIds":[381,392,401,411,421,431,441,451,461,471,481,491,501,511]},
                                ]},
               {name:"D排",span:2,lays:[{"name":3,"cellIds":[523,533]},
                                 {"name":2,"cellIds":[522,532]},
                                 {"name":1,"cellIds":[521,532]},
                                ]},

           ],
//数据
           matieralData:{
               "123":{"materialName":"钕Nd","materialCode":"2020010001","wight":1000,isChecked:false},
               "163":{"materialName":"钴Co","materialCode":"2020120002","wight":1000,isChecked:false},
               "203":{"materialName":"铽Tb","materialCode":"2019100005","wight":48.1,isChecked:true}
           }
           
        } 
    },
}
</script>

css

<style scoped lang="scss">
    section,table,h4, tr,td{
        padding:0;
        margin:0;
    }
    #sketchMap {
        font-family: "宋体";
        padding:0;
        margin:0;
        h4 {
            font-size:27px;
            margin:10px;
            text-align:center;
        }
    }
    #sketchTable {
        text-align:center;
        table {
            border: 2px solid red !important;
            border-collapse:collapse;
            font-size:15px;
            margin:20px 0;
            th {
                border:1.5px solid black;
            }
            td{
                border:1px solid grey;
                width:100px;
            }
            td:first-child{
                padding-left:5px;
                width:130px;
                text-align:left;
                font-weight:bold;
            }
            th:nth-child(2),td:nth-child(2) {
                text-align: left;
                font-weight:bold;
            }
            td:nth-child(2){
                padding-left:3px;
            }
        }
    }
    .uncheck {
        background-color: #fcfc0a;
    }
    .checked{
        background-color: #00b050;
    }
<style>