共计 2901 个字符，预计需要花费 8 分钟才能阅读完成。
最近接到一个需求，就是要做一个页面放个表格来显示数据，并且数据条数是动态并且规定格式且带合并的；首先看效果图：
1. 服务返回的数据结构类似表格显示的树形结构：
data: {
type: Array,
value: [{
“designation”: “001”,
“rows”: [{
“manufacturerName”: “ 广州 ”,
“manufacturerId”: 100,
“myProductOffers”:[{“a”: “ 供应商 ”,”b”: “ 期 / 现货 ”,…}],
“todayDealPrice”: [{“a”: “ 供应商 ”,”b”: “ 期 / 现货 ”,…}],
“otherProductOffers”:[{“a”: “ 供应商 ”,”b”: “ 期 / 现货 ”,…}],
}]
2. 页面代码是这样子的：
<tbody>
<template is=”dom-repeat” items=”[[data]]” as=”data”>
<template is=”dom-repeat” items=”[[data.rows]]” as=”rows” index-as=”rowsIndex”>
<template is=”dom-repeat” items=”[[rows.myProductOffers]]” as=”myProductOffers” index-as=”customerIndex”>
<tr>
<template is=”dom-if” if=”[[_isFirstRow(rowsIndex)]]”>
<td rowspan$=”[[_getDataLength(data)]]”>[[data.designation]]</td>
</template>
<td rowspan$=”[[_getRowsLength(rows)]]”>[[rows.manufacturerName]]</td>
<td> 报价 </td>
<td>[[myProductOffers.a]]</td>
<td>[[myProductOffers.b]]</td>
<td>[[myProductOffers.c]]</td>
<td>[[myProductOffers.d]]</td>
<td>[[myProductOffers.e]]</td>
<td>[[myProductOffers.f]]</td>
<td>[[myProductOffers.g]]</td>
<td>[[myProductOffers.h]]</td>
<td>[[myProductOffers.i]]</td>
<td>[[myProductOffers.j]]</td>
<td>[[myProductOffers.k]]</td>
<td>[[myProductOffers.l]]</td>
</tr>
</template>
<template is=”dom-repeat” items=”[[rows.todayDealPrice]]” as=”todayDealPrice” index-as=”todayIndex”>
<tr>
<template is=”dom-if” if=”[[_isFirstRow(todayIndex)]]”>
<td rowspan$=”[[_getArrayLength(rows.todayDealPrice)]]”> 当天成交价 </td>
</template>
<td>[[todayDealPrice.a]]</td>
<td>[[todayDealPrice.b]]</td>
<td>[[todayDealPrice.c]]</td>
<td>[[todayDealPrice.d]]</td>
<td>[[todayDealPrice.e]]</td>
<td>[[todayDealPrice.f]]</td>
<td>[[todayDealPrice.g]]</td>
<td>[[todayDealPrice.h]]</td>
<td>[[todayDealPrice.i]]</td>
<td>[[todayDealPrice.j]]</td>
<td>[[todayDealPrice.k]]</td>
<td>[[todayDealPrice.l]]</td>
</tr>
</template>
<template is=”dom-repeat” items=”[[rows.otherProductOffers]]” as=”otherProductOffers” index-as=”otherIndex”>
<tr>
<template is=”dom-if” if=”[[_isFirstRow(otherIndex)]]”>
<td rowspan$=”[[_getArrayLength(rows.otherProductOffers)]]”> 当天其他报价 </td>
</template>
<td>[[otherProductOffers.a]]</td>
<td>[[otherProductOffers.b]]</td>
<td>[[otherProductOffers.c]]</td>
<td>[[otherProductOffers.d]]</td>
<td>[[otherProductOffers.e]]</td>
<td>[[otherProductOffers.f]]</td>
<td>[[otherProductOffers.g]]</td>
<td>[[otherProductOffers.h]]</td>
<td>[[otherProductOffers.i]]</td>
<td>[[otherProductOffers.j]]</td>
<td>[[otherProductOffers.k]]</td>
<td>[[otherProductOffers.l]]</td>
</tr>
</template>
</template>
</template>
</tbody>
这里要注意的是每一层循环的 index，利用这个 index 来判断合并的项是第一个的时候显示就可以了
3. 对应的 js 代码：
_getDataLength: function (data) {
let length = 0;
data.rows.forEach(e=>{
length += e.myProductOffers.length
length += e.todayDealPrice.length
length += e.otherProductOffers.length
})
return length
},
_getRowsLength: function (rows) {
let length = rows.myProductOffers.length+ rows.todayDealPrice.length+rows.otherProductOffers.length;
return length
},
_getArrayLength: function (rows) {
return rows.length
},
_isFirstRow:function (index) {
return index === 0
}
