layui中怎么表格里显示图片

发布时间：2021-07-26 11:39:07 阅读：385 作者：Leah 栏目：开发技术

开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章给大家介绍layui中怎么表格里显示图片，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

1、jsp代码

<div class="demoTable">   <button class="layui-btn" data-type="publish">发布Banner</button></div><table class="layui-hide" id="banner"></table>

2、然后是js代码

layui.use('table', function(){    var table = layui.table;  table.render({    elem: '#banner',url:'../banner/list',cols: [[     {field:'ban_id',width:20,title: 'ID', sort: true}            ,{field:'ban_img',title: '图片',templet:'<div><img  src="{{ d.ban_img }}"></div>'}    ,{field:'ban_content', title: '备注'}    ,{field:'ban_href', title: '地址'} ]]});});

注意：这里需要注意的是，加入了templet，这里就是加入表单元素等模板

其中这个d代表的就是服务器返回的数据，ban_img是数据对应的字段名

<div class="demoTable">   <button class="layui-btn" data-type="publish">发布Banner</button></div><table class="layui-hide" id="banner"></table> <style type="text/css">    .layui-table-cell{    text-align:center;    height: auto;    white-space: normal;    }</style>

可以看到我在底部加上了样式，这里有优先级的问题，所以必须是放在最下面，谨记！！！

原来如此，layui内部定义了这么一个样式，所以话不多说，改！

<style type="text/css">.layui-table-cell{text-align:center;height: auto;white-space: normal;}.layui-table img{max-width:300px}

关于layui中怎么表格里显示图片就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

layui中怎么表格里显示图片

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签