layUI系统图标显示异常,在数据表格上文字图标显示为口

layUI数据表格上文字图标不显示问题

问题描述

使用layUI时,系统图标显示异常,特别是在数据表格中。如下图示:
在这里插入图片描述

问题原因

layUI中用到的系统图标使用的是【& #xe770;】这样的文字格式,并不是以png之类的图片格式。事实上,他其实还是图片格式,只不过系统内置把文字转成了图片的样子而已。不会真有人天真的以为几个简单的文字就真的能存储图片吧…
既然这个文字事实上存储的并不是图片,那么他要展示出图片效果,必然就得有一个标记告诉系统这个不是文字而是图片,不然他怎么知道什么文字要转换什么文字不转呢?
查看官方API可以看到,他需要依赖的是class属性为layui-icon
在这里插入图片描述

验证

咱们去系统能正常显示图片的地方看看,可以看到这个正常显示的图标是有class='layui-icon’的。
在这里插入图片描述
再来看看数据表格上,显然并没有class='layui-icon’这个属性
在这里插入图片描述

思考

那么问题来了,这个数据表格中没有class='layui-icon’怎么办?显然对于框架而言,数据表格这种东西是框架自动生成的,我们并没有快而有效的篡改他的方法,并不能直接在这个行的div上都加上class=‘layui-icon’。
但是,我们可以在这个div中嵌套一个标签,这个嵌套进来的标签是我们加进去的,岂不是想给他什么样的class就给她什么class,甚至style之类的都可以了。
在这里插入图片描述

问题解决

在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页