需要展现这样一个表格

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