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

kamushin233 發布于2019-08-23 16:53 / 1832人閱讀

摘要：最近接到一個需求，就是要做一個頁面放個表格來顯示數據，并且數據條數是動態并且規定格式且帶合并的首先看效果圖服務返回的數據結構廣州供應商期現貨供應商期現貨供應商期現貨頁面代碼是這樣子的報價當天成交價當天其他報價這里要注

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

1. 服務返回的數據結構：

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

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

這里要注意的是每一層循環的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
}

GPU云服務器云服務器表格合并 js動態表格數據 python合并表格 js獲取動態表格數據類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103444.html

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

摘要：最近接到一個需求，就是要做一個頁面放個表格來顯示數據，并且數據條數是動態并且規定格式且帶合并的首先看效果圖服務返回的數據結構廣州供應商期現貨供應商期現貨供應商期現貨頁面代碼是這樣子的報價當天成交價當天其他報價這里要注最近接到一個需求，就是要做一個頁面放個表格來顯示數據，并且數據條數是動態并且規定格式且帶合并的；首先看效果圖： showImg(https://segmentfault...

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

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

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

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

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

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

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

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

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