
So zeigen Sie Bilder in der Laui-Tabelle an:
Bilder müssen template.templet verwenden:
Beachten Sie, dass sich 48px auf die Höhe des Div bezieht. Wenn Sie die Höhe des IMG-Bildes bestimmen möchten, müssen Sie den Stil
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;'}
|
Nach dem Login kopieren
CSS separat entwerfen. Bitte ersetzen Sie die Überschrift
1 2 3 4 5 6 7 8 9 10 11 12 13 | <style type= "text/css" >.layui-table-fixed-r td{height:58px!important;}
.layui-table-fixed-r th{height:58px!important;}
.layui-table img {
max-width: 48px;min-height: 48px;
}
.laytable-cell-3-wx_headimg ,.laytable-cell-1-wx_headimg,.laytable-cell-2-wx_headimg,.laytable-cell-3-wx_headimg,.laytable-cell-4-wx_headimg,.laytable-cell-5-wx_headimg,.laytable-cell-6-wx_headimg,.laytable-cell-7-wx_headimg,.laytable-cell-8-wx_headimg,.laytable-cell-9-wx_headimg,.laytable-cell-10-wx_headimg,.laytable-cell-11-wx_headimg,.laytable-cell-12-wx_headimg,.laytable-cell-13-wx_headimg,.laytable-cell-14-wx_headimg{
width: 48px!important;;padding:0px!important;height: 48px!important;;
line-height: 48px!important;;
}
</style>
|
Nach dem Login kopieren
empfohlen:Layui-Framework-Tutorial
Das obige ist der detaillierte Inhalt vonSo zeigen Sie Bilder in der Liste in Laui an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!