js 根据后台返回的数据渲染成表格

最新推荐文章于 2026-05-22 05:31:29 发布

原创

最新推荐文章于 2026-05-22 05:31:29 发布 · 4.8k 阅读

标签

#javascript

本文介绍如何根据后台返回的动态数据，使用JavaScript和Element UI框架创建表格。数据模式包含数组长度决定列数，对象key作为表头。通过原生JS实现，代码示例展示了解决方案。

前言：最近接到比较头晕的需求，后台返回的数组里面，渲染成表格，数组的长度是多少，表格就是多少列，数组对象的key是什么，表头就是什么（key是个中文），先给大家来看下数据模式：

var  records = [
            {
                "活动发生日":"20200113",
                "当天抽奖次数":1,
                "累计抽奖次数":1,
                "奖品发放个数":0,
                "累计奖品发放个数":0
            },
            {
                "活动发生日":"20200114",
                "当天抽奖次数":4,
                "累计抽奖次数":5,
                "奖品发放个数":0,
                "累计奖品发放个数":0
            },
            {
                "活动发生日":"20200115",
                "当天抽奖次数":3,
                "累计抽奖次数":8,
                "奖品发放个数":0,
                "累计奖品发放个数":0
            },
            {
                "活动发生日":"20200116",
                "当天抽奖次数":70,
                "累计抽奖次数":78,
                "奖品发放个数":2,
                "累计奖品发放个数":2
            }
        ]

因为后台管理系统用的是element UI框架做的，对于这个需求，于是媛姐我不得不捡起百年不用的原生js，作为小前端的我，总算也算给做出来了，直接上代码
html：