接到一个任务需要纵向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>