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
}