最近接到一個需求，就是要做一個頁面放個表格來顯示數據，並且數據條數是動態並且規定格式且帶合併的；
首先看效果圖：
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
}