polymer實現(xiàn)動態(tài)數(shù)據(jù)并且?guī)в斜砀窈喜?

kamushin233 發(fā)布于2019-08-23 16:53 / 1839人閱讀

摘要：最近接到一個需求，就是要做一個頁面放個表格來顯示數(shù)據(jù)，并且數(shù)據(jù)條數(shù)是動態(tài)并且規(guī)定格式且?guī)Ш喜⒌氖紫瓤葱Ч麍D服務(wù)返回的數(shù)據(jù)結(jié)構(gòu)廣州供應(yīng)商期現(xiàn)貨供應(yīng)商期現(xiàn)貨供應(yīng)商期現(xiàn)貨頁面代碼是這樣子的報價當(dāng)天成交價當(dāng)天其他報價這里要注

最近接到一個需求，就是要做一個頁面放個表格來顯示數(shù)據(jù)，并且數(shù)據(jù)條數(shù)是動態(tài)并且規(guī)定格式且?guī)Ш喜⒌模?br>首先看效果圖：

1. 服務(wù)返回的數(shù)據(jù)結(jié)構(gòu)：

data: {
    type: Array,
    value: [{
        "designation": "001",
        "rows": [{
            "manufacturerName": "廣州",
            "manufacturerId": 100,
            "myProductOffers":[{"a": "供應(yīng)商","b": "期/現(xiàn)貨",...}],
            "todayDealPrice": [{"a": "供應(yīng)商","b": "期/現(xiàn)貨",...}],
            "otherProductOffers":[{"a": "供應(yīng)商","b": "期/現(xiàn)貨",...}],
        }]

2. 頁面代碼是這樣子的：

這里要注意的是每一層循環(huán)的index，利用這個index來判斷合并的項是第一個的時候顯示就可以了

3. 對應(yīng)的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
}

云服務(wù)器 GPU云服務(wù)器表格合并 js動態(tài)表格數(shù)據(jù) python合并表格 js獲取動態(tài)表格數(shù)據(jù)類型

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103444.html

相關(guān)文章

polymer實現(xiàn)動態(tài)數(shù)據(jù)并且帶有表格合并

摘要：最近接到一個需求，就是要做一個頁面放個表格來顯示數(shù)據(jù)，并且數(shù)據(jù)條數(shù)是動態(tài)并且規(guī)定格式且?guī)Ш喜⒌氖紫瓤葱Ч麍D服務(wù)返回的數(shù)據(jù)結(jié)構(gòu)廣州供應(yīng)商期現(xiàn)貨供應(yīng)商期現(xiàn)貨供應(yīng)商期現(xiàn)貨頁面代碼是這樣子的報價當(dāng)天成交價當(dāng)天其他報價這里要注最近接到一個需求，就是要做一個頁面放個表格來顯示數(shù)據(jù)，并且數(shù)據(jù)條數(shù)是動態(tài)并且規(guī)定格式且?guī)Ш喜⒌?；首先看效果圖： showImg(https://segmentfault...

jsyzchen 2019-08-02 16:12 評論0 收藏0
開坑，寫點Polymer 1.0 教程第2篇(下)——hello world篇

摘要：數(shù)據(jù)綁定是一個非常屌的的辦法能讓你快速的傳播組件的變化，減少代碼的行數(shù)。你可以用雙大括弧來聲明你需要綁定的屬性，大括弧在運行時會被替換成括弧內(nèi)的屬性值。本篇完，下篇還沒想好要寫啥。書接上回，上回叔說到如何注冊（創(chuàng)建）一個自定義組件，這回我們來講講它的數(shù)據(jù)綁定。使用數(shù)據(jù)綁定當(dāng)然，你可能不會僅僅滿足上文教的簡單的靜態(tài)自定義組件，你通常需要動態(tài)的更新你的dom組件。數(shù)據(jù)綁定是一個非常...

xiangzhihong 2019-08-21 10:41 評論0 收藏0
vue實現(xiàn)表格合并

摘要：因為，如果接下來的一行還會渲染的話就會被擠下去，因此，下面被合并的單元格要隱藏掉，通過控制即可。因此，每個標(biāo)簽需要帶有兩個屬性值，和來控制每一個單元格的合并行數(shù)和是否顯示。 1. 場景這兩天一個項目，屬于子需求吧，就是要做一個頁面放個簡單的banner下面是張大表格用來顯示數(shù)據(jù)項，純粹為了view層操作方便，就用了vue做渲染。然而，對方最近又提出了一個惡心需求，需要相鄰的相同值的行...

zhangrxiang 2019-08-22 10:44 評論0 收藏0
polymer1.0 簡要介紹和實例

摘要：雙向數(shù)據(jù)綁定屬性使用屬性聲明地址除了提供文字內(nèi)容綁定，還提供元素屬性綁定，同樣也是雙向數(shù)據(jù)綁定。 polymer是什么呢一個可以幫助你輕松創(chuàng)建一個自定義標(biāo)簽的庫利用polymer的一些特性你可以創(chuàng)建自定義元素來減少模板代碼大小也可以利用它非常簡單的創(chuàng)建復(fù)雜交互元素注冊元素生命周期回調(diào) 屬性的觀察 local DOM模板數(shù)據(jù)綁定 Register an...

zhongmeizhi 2019-08-21 10:34 評論0 收藏0
vue elementUI table 自定義表頭和行合并

摘要：最近項目中做表格比較多，對表格的使用，只需要傳遞進去數(shù)據(jù)，然后寫死表頭即可渲染。該函數(shù)可以返回一個包含兩個元素的數(shù)組，第一個元素代表，第二個元素代表。也可以返回一個鍵名為和的對象。最近項目中做表格比較多，對element表格的使用，只需要傳遞進去數(shù)據(jù)，然后寫死表頭即可渲染。但現(xiàn)實中應(yīng)用中，如果寫死表頭，并且每個組件中寫自己的表格，不僅浪費時間而且消耗性能。這個時候需要動態(tài)渲染表頭。...

funnyZhang 2019-08-26 13:53 評論0 收藏0