前端 table 数据纵向展示

- 日理万妓 2023-02-13 14:50 200阅读 0赞

接到一个任务需要纵向table，数据是循环出来的，表头有纵向有横向，横向是月份，纵向是数据列，有字段需要支持修改

因为公司用element，但是这玩意儿的table都是横向，于是开始网上搜索，结果都是将同一表头的数据放进一个list中展示，但是如果这样的话，我无法根据id修改数据库的字段，于是开始想用原生table写，但是找了半天都不行

终于找到一个博主救我dog命

[https://www.jianshu.com/p/5907117ecb70][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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMwNTU2Nzg_size_16_color_FFFFFF_t_70][]

[https_www.jianshu.com_p_5907117ecb70]: https://www.jianshu.com/p/5907117ecb70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMwNTU2Nzg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200529180653203.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMwNTU2Nzg=,size_16,color_FFFFFF,t_70