polymer实现动态数据并且带有表格合并

kamushin233 发布于2019-08-23 16:53 / 1815人阅读

摘要：最近接到一个需求，就是要做一个页面放个表格来显示数据，并且数据条数是动态并且规定格式且带合并的首先看效果图服务返回的数据结构广州供应商期现货供应商期现货供应商期现货页面代码是这样子的报价当天成交价当天其他报价这里要注

最近接到一个需求，就是要做一个页面放个表格来显示数据，并且数据条数是动态并且规定格式且带合并的；
首先看效果图：

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获取动态表格数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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