美文网首页
vue 使用 v-for 让 table 纵向展开分组

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

作者: Mr菜头 | 来源:发表于2020-01-17 15:42 被阅读0次

需要展现这样一个表格


image.png

分析:
需要循环展开每排表格,同时行上有分组,
采用行模板模式 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>

相关文章

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

    需要展现这样一个表格 分析:需要循环展开每排表格,同时行上有分组,采用行模板模式 table的 tbody 带 ...

  • Vue 循环渲染

    v-for指令的使用 在 Vue 中,可以使用 v-for 指令绑定数据到数组来渲染一个列表。 使用 v-for ...

  • Vue 基础

    Vue 起步 Vue V-for循环 (一) Vue V-for 循环(二) Vue v-for表格

  • el-table 封装

    // 使用 // table.vue

  • 2018-09-11

    vue.js第一节9月10日vue.js基础、v-for循环、v-modv-el双向绑定、v-on事件、table...

  • vue.js学习笔记一

    vue.js循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法, s...

  • Vue-(3)循环-计算-监听-样式绑定-事件处理

    一:循环语句 Vue.js 循环语句,循环使用 v-for 指令。v-for 指令需要以 site in site...

  • el-table 纵向垂直表头

    el-table 纵向垂直表头 Element el-table 纵向垂直表头 / el-table 表格纵横转换...

  • Vue 列表渲染

    Vue 使用 v-for 指令渲染一组数据 渲染数组 渲染对象 在 v-for 指令中可以使用 of 分隔符替换 ...

  • Vue 纵向Table转横向Table (转置)

    数组参照矩阵思想, 对数组进行转置。 缺点: 转置后的数组仅是单纯的存每一行数据的数组用于展示, 失去了原数组...

网友评论

      本文标题:vue 使用 v-for 让 table 纵向展开分组

      本文链接:https://www.haomeiwen.com/subject/xmnczctx.html