layui数据表格中包含图片的处理方式

layui数据表格中包含图片时,图片可能显示不全.

搜索后网上的解决方法:

<style>.layui-table-cell {height: 100%;max-width: 100%;}
</style>

但是仍然有缺陷,当一个页面存在多个数据表格时,这个方法容易造成不相干的表格变形等问题.

以下给出我的解决方案

1.cols参数中有图片的列设置如下

,{field:'pic', title: '图片',  width:'auto',templet:'<div><img src="/{{ d.pic}}"></div>'}

2.写一个完工回调BOMlist为你表格的lay-filter的值

done:function (res) {$('div[lay-id="BOMlist"]').find('.layui-table-cell').css('height','100%')}

3.完工.

本方法只对一个表格生效,防止影响不相干的表格

layui数据表格中包含图片的处理方式相关推荐

layui数据表格中展示图片及图片预览
在项目中遇到数据表格中放入图片同时可以点击放大预览.预览方式我才用的是layer方式.代码如下: layui.use('table', function(){var table = layui.tab ...
layui数据表格中导出所有数据的简易解决办法
layui数据表格中导出所有数据的简易解决办法官方文档的困惑解决办法官方文档的困惑首先要说明的是:layui在 table 的工具栏内置了数据导出按钮,如果你是用它内置的导出按钮来导出数据,是 ...
解决layui数据表格中嵌套下拉框显示问题
在layui数据表格中嵌套下拉框时,下拉框不能正常弹出,仔细观察发现,点击下拉框时会有一个短暂的弹出动画,马上又消失了,遂猜想,大概是显示的问题,可能是被覆盖了,那么解决覆盖就可以了. 如图, 下拉框 ...
在layui数据表格中修改数据
一.修改layui表格中的数: 1.layui表格中开启输入框:edit:'text'; //渲染表格组件tableInsT = table.render({elem: '#tesc',url: '$ ...
layui数据表格中加入二维码
最近在做一个后端项目时,需要在表格中展示二维码,但是在layui表格渲染时无法获取元素id,下面就将我出现的问题记录下,并提供解决方案供大家查看. jq插件qrcode引入和下载 qrcode其实是通 ...
Layui数据表格中使用模板引擎
1.layui对数据表格中某一列做处理时,比如时间格式化: 图中d.ghrq,d就是当前行数据: 2.layui数据表格工具条按钮需要通过某一列的值去判断是否显示这个按钮效果: 也可以使用layui ...
Layui数据表格中动态插入行插入下拉框
想要在已加载的layui数据表格动态的插入一行,首先要在加载表格的时候设置它的event值.因为我这里是点击序号就添加一行,所以我在序号中设置了它的event值!当然在静态表格当中也是一样的操作,在你 ...
layui怎么表格中显示图片
layui的表格使用还是非常简单的,layui文档中已经非常详细,下面直接上代码了如果你想了解更多关于layui的知识,可以点击:layui教程 1.jsp代码 <div class=&quo ...
layui数据表格点击图片放大
今天用layui写了一个表格里面涉及图片显示的问题,我想实现通过点击图片弹出一个弹出层,使图片自适应放大.下面是代码: 表格里面: {field: 'imgUrl',title: '展示图片',tem ...

layui数据表格中包含图片的处理方式

layui数据表格中包含图片的处理方式相关推荐

最新文章

热门文章