前端 table 數據縱向展示

接到一個任務需要縱向table，數據是循環出來的，表頭有縱向有橫向，橫向是月份，縱向是數據列，有字段需要支持修改

因爲公司用element，但是這玩意兒的table都是橫向，於是開始網上搜索，結果都是將同一表頭的數據放進一個list中展示，但是如果這樣的話，我無法根據id修改數據庫的字段，於是開始想用原生table寫，但是找了半天都不行

終於找到一個博主救我dog命

https://www.jianshu.com/p/5907117ecb70

感謝

祭上vue代碼

<template>
  <div class="adv_contact">
    
    
        <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="12">月份</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 v-for= "(id) in lay.cellIds" :key="id">{{matieralData[lay.name][id]? matieralData[lay.name][id].materialName:""}}</td>                
                        </tr>
                        <tr :key="'c_'+group.name+lay.name">
                            <td>批次號</td>
                            <td></td>
                            <td v-for= "(id) in lay.cellIds" :key="id">{{matieralData[lay.name][id]?matieralData[lay.name][id].materialCode:""}}</td>                
                        </tr>
                        <tr :key="'s_'+group.name+lay.name">
                            <td>總量</td>
                            <td></td>
                            <td v-for= "(id) in lay.cellIds" :key="id">{{matieralData[lay.name][id]?matieralData[lay.name][id].wight:""}}</td>                
                        </tr>
                        <tr :key="'z_'+group.name+lay.name">
                            <td>目標</td>
                            <td></td>
                            <td v-for= "(id) in lay.cellIds" :key="id">{{matieralData[lay.name][id]?matieralData[lay.name][id].a:0}}<el-button size="mini" type="text">修改</el-button></td>                
                        </tr>
                    </template>
                
                </tbody>

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

  </div>
</template>

<script>
export default {
    data(){
        return {
        //表頭數據
           groups:[
               {name:"大區",lays:[{"name":1,"cellIds":[1,2,3,4,5,6,7,8,9,10,11,12]},
                                ]},
                {name:"大區1",lays:[{"name":2,"cellIds":[1,2,3,4,5,6,7,8,9,10,11,12]},
                                ]},

           ],
//數據
           matieralData:{
               1:{"1":{"materialName":"釹Nd","materialCode":"2020010001","wight":1000,'a':1},
               "2":{"materialName":"鈷Co","materialCode":"2020120002","wight":1000, 'a':0},
                "3":{"materialName":"鋱Tb","materialCode":"2019100005","wight":48.1, 'a':0}},

                2:{"1":{"id":1,"materialName":"釹Nd","materialCode":"2020010001","wight":3000, 'a':0},
               "2":{"id":2, "materialName":"鈷Co","materialCode":"2020120002","wight":4000, 'a':0},
                "3":{"id":3, "materialName":"鋱Tb","materialCode":"2019100005","wight":58.1, 'a':0}}
           }
           
        } 
    },
}
</script>

<style scoped lang="scss">
.column {
  height: 54px;
  border: 1px solid black;
  text-align: center;
}
    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: 1px solid black !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>