polymer實現動態數據而且帶有表格合併

---

最近接到一個需求，就是要作一個頁面放個表格來顯示數據，而且數據條數是動態而且規定格式且帶合併的；
首先看效果圖：

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
}