Layui table表格部分数据无法渲染出来

1、项目场景

在日常的开发中，由于项目需要，所以会经常使用Layui table来进行展示数据。

2、问题描述

从下图中可以看到，后台的api接口确实是返回了两条数据，Layui table表格中却只渲染出一条数据？简直头大。

3、原因分析

通过查看数据库，对比了数据源的所有字段，经过排查发现了是因为数据源中有一个length字段，属性length等于0的数据都没有显示到表格中。

4、解决方案

处理后台api接口返回的数据，删除数据源中的length属性。

table.render({
    elem: '#mainTable',
    url: imatgeneralGetByPageUrl,
    height: 'full-' + tableHeight,
    method: 'post',
    contentType: 'application/json',
    //where: { matgroup: matgroup },
    where: GetTable(),
    parseData: function (res) {
        //数据源中有一个length字段时，length: 0部分数据未显示出来，删除数据源中的length属性
        let newData = JSON.parse(JSON.stringify(res.rows))
        newData.map(function (e) { delete e.length })
        return {
            "code": 0,
            "msg": res.message,
            "count": res.total,
            "data": newData
        }
    },
    cols: [[
        { field: 'matcode', minWidth: 200, title: '型号代码', sort: true },
        { field: 'matname', minWidth: 200, title: '型号名称' },
        { field: 'salesuom', minWidth: 200, title: '型号单位' },
        { field: 'unitwght', minWidth: 200, title: '型号单重' },
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 25,
    page: true,
    skin: 'line',
});

function GetTable() {
    return {
        "matgroup": matgroup
    };
};

 

5、处理结果

经过处理，现在所有的数据都可以渲染出来了。