layui中table控件使用templet无数据时显示undefined

小灰灰 2023-06-27 12:58 1阅读 0赞

在使用layui表格控件的时候，因为数据是一个嵌套对象，所以不能直接使用field来获取数据，只能使用templet，但是在使用templet的时候发现，有的字段没有数据时表格就会显示undefined  
![在这里插入图片描述][20200107103622597.png]  
![在这里插入图片描述][20200107103605799.png]  
例如上面的字段`电话`，当字段`电话`中没有数据时，显示的就是undefined字符串，  
解决办法就是使用三元表达式给它添加判断，  
![在这里插入图片描述][20200107104207106.png]

/** *typeof d.users.cellphone 判断数据类型 当变量不存在时，数据类型为undefined *下面的意思就是当cellphone电话这个字段没有数据时就在表格中显示“”，如果有数据就直接显示 */
    typeof d.users.cellphone !== "undefined" ? d.users.cellphone : ""

修改后运行截图：  
![在这里插入图片描述][20200107104347172.png]  
修改后，当没有数据的时候就不会显示undefined了

还有一种方法就是通过函数转义的方式：`函数转义`详见[layui官网][layui]  
具体代码如下：  
![在这里插入图片描述][20200107104651900.png]

{ 
    	title: "备注", templet: function (data) { 
    		if (typeof data.powers.remark === "undefined") return "";
    		return data.powers.remark;
    	}
    }

[20200107103622597.png]: https://img-blog.csdnimg.cn/20200107103622597.png
[20200107103605799.png]: https://img-blog.csdnimg.cn/20200107103605799.png
[20200107104207106.png]: https://img-blog.csdnimg.cn/20200107104207106.png
[20200107104347172.png]: https://img-blog.csdnimg.cn/20200107104347172.png
[layui]: https://www.layui.com/doc/modules/table.html#templet
[20200107104651900.png]: https://img-blog.csdnimg.cn/20200107104651900.png