layui table中嵌套对象提取

偏执的太偏执、 2023-01-05 12:17 358阅读 0赞

在layui中的table 中如果提取到的数据是object中还嵌套这object对象，如果直接显示，则会出现以下的状况

,cols: [
                    [ //表头
                    { field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{ field: 'bookName', title: 'bookName', width:80}
                    ,{ field: 'author', title: 'author', width:80, sort: true}
                    ,{ field: 'bookUrl', title: 'bookUrl', width:80}
                    ,{ title: 'donatePeople', width:80, sort: true}
                    ,{ field: 'library',title: 'library', width:100, sort: true}
                    ,{ field: 'details', title: 'details', width:300, sort: true}
                    ,{ fixed: "right",width: 160,align:'center',toolbar:"#Tool"}
                    ]
                ]

数据格式如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcxNDgwOA_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][20210112113101400.png]  
为了提取object中的数据  
只需要在\{field\}中稍作修改即可

cols: [
                    [ //表头
                    { field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{ field: 'bookName', title: 'bookName', width:80}
                    ,{ field: 'author', title: 'author', width:80, sort: true}
                    ,{ field: 'bookUrl', title: 'bookUrl', width:80}
                    ,{ title: 'donatePeople', width:80, sort: true,templet:function (donatePeople) { 
                            return donatePeople.donatePeople.wxName;
                        }}
                    ,{ title: 'library', width:100, sort: true,templet:function (library) { 
                            return library.library.libraryName;
                        }}
                    ,{ field: 'details', title: 'details', width:300, sort: true}
                    ,{ fixed: "right",width: 160,align:'center',toolbar:"#Tool"}
                    ]
                ]

成功：  
![在这里插入图片描述][20210112113547447.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcxNDgwOA_size_16_color_FFFFFF_t_70]: /images/20221119/4f2dd07409404ba68312defaffc4fc84.png
[20210112113101400.png]: /images/20221119/8470f256689c48cfa0f9ab491f35da30.png
[20210112113547447.png]: https://img-blog.csdnimg.cn/20210112113547447.png