本文摘自PHP中文网,作者尚,侵删。
layui table中显示图片的方法:
图片需要用到模板.templet:
注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计style
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < script type = "text/javascript" >
layui.use('table',function () {
var table= layui.table;
table.render({
elem:'#needstable'
,url:'{:url()}'
,method:'post'
,cellMinWidth:80
,page:true
,cols:[[
{field:'needs_id',title:'id',fixed:'left',width:80}
,{field:'wx_username',title:'昵称',fixed:'left',width:80}
,{field:'wx_headimg',title:'头像',fixed:'left',templet:'< div >< img src = "{{ d.wx_headimg}}" ></ div >',style:'height:48px;width:48px;line-height:48px!important;'}
|
css,注意替换headimg
阅读剩余部分
相关阅读 >>
layui怎么固定表格的表头
layui列表怎么取input框的值
layui表单元素怎么校验
layui中动态设置checkbox选中状态的方法介绍
layui为什么好
layui框架怎么使用
layui时间控件闪退的问题介绍
layui和easyui的区别是什么?
layui使用iconfont的方法介绍
layui怎么弹出form
更多相关阅读请进入《layui》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » layui怎么做图片在列表中显示