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

jsyzchen 發(fā)布于2019-08-02 16:12 / 3215人閱讀

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

最近接到一個(gè)需求，就是要做一個(gè)頁(yè)面放個(gè)表格來(lái)顯示數(shù)據(jù)，并且數(shù)據(jù)條數(shù)是動(dòng)態(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. 頁(yè)面代碼是這樣子的：

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

3. 對(duì)應(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動(dòng)態(tài)表格數(shù)據(jù) python合并表格 js獲取動(dòng)態(tài)表格數(shù)據(jù)類型

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/54864.html

相關(guān)文章

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

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

kamushin233 2019-08-23 16:53 評(píng)論0 收藏0
開(kāi)坑，寫(xiě)點(diǎn)Polymer 1.0 教程第2篇(下)——hello world篇

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

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

摘要：因?yàn)椋绻酉聛?lái)的一行還會(huì)渲染的話就會(huì)被擠下去，因此，下面被合并的單元格要隱藏掉，通過(guò)控制即可。因此，每個(gè)標(biāo)簽需要帶有兩個(gè)屬性值，和來(lái)控制每一個(gè)單元格的合并行數(shù)和是否顯示。 1. 場(chǎng)景這兩天一個(gè)項(xiàng)目，屬于子需求吧，就是要做一個(gè)頁(yè)面放個(gè)簡(jiǎn)單的banner下面是張大表格用來(lái)顯示數(shù)據(jù)項(xiàng)，純粹為了view層操作方便，就用了vue做渲染。然而，對(duì)方最近又提出了一個(gè)惡心需求，需要相鄰的相同值的行...

zhangrxiang 2019-08-22 10:44 評(píng)論0 收藏0
polymer1.0 簡(jiǎn)要介紹和實(shí)例

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

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

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

funnyZhang 2019-08-26 13:53 評(píng)論0 收藏0