本文摘自PHP中文网，作者angryTom，侵删。
layui的表格使用还是非常简单的，layui文档中已经非常详细，下面直接上代码了
如果你想了解更多关于layui的知识，可以点击：layui教程
1、jsp代码
1 2 3 4 | <div class="demoTable">
<button class="layui-btn" data-type="publish">发布Banner</button>
</div>
<table class="layui-hide" id="banner"></table>
|
2、然后是js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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，这里就是加入表单元素等模板。详情参考：
https://www.layui.com/doc/modules/table.html#templet
其中这个d代表的就是服务器返回的数据，ban_img是数据对应的字段名
这还不够，接下来的才是关键，因为此时此刻你的表格是这个样子的
阅读剩余部分
相关阅读 >>
让layui支持wangeditor编辑器的方法
webpack打包layui实现步骤
layui框架是什么
对于layui框架源码兼容性微调介绍
layui表格动态显示变换
layui怎么调整弹框大小
layui如何获取table某一行的值
一些layui底层方法介绍
layui如何给数据表格添加点击事件
layui input只读属性是什么
更多相关阅读请进入《layui》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » layui怎么表格中显示图片
