layui的table中顯示圖片方法
更新時間：2018年08月17日 09:03:20 作者：viqecel
今天小編就為大家分享一篇layui的table中顯示圖片方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
圖片需要用到模板.templet：
注意div不可省略，48px指的是div的高度，如果要決定img圖片的高度，需要單獨設(shè)計style
<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
<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>
以上這篇layui的table中顯示圖片方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了JavaScript的Date對象，和大家分享如何制作簡易鐘表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
微信小程序?qū)崿F(xiàn)動態(tài)渲染Markdown示例詳解
這篇文章主要為大家介紹了微信小程序?qū)崿F(xiàn)動態(tài)渲染Markdown示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了通過js如何改變狀態(tài)欄文字,需要的朋友可以了解下2014-06-06
JavaScript斷言與類型守衛(wèi)及聯(lián)合聲明超詳細介紹
這篇文章主要介紹了JavaScript斷言與類型守衛(wèi)及聯(lián)合聲明，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
這篇文章主要介紹了微信小程序HTTP接口請求封裝代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了JavaScript如何實現(xiàn)圖片處理與合成,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
JavaScript展開運算符用法及實際應(yīng)用詳解
展開運算符是JavaScript中的語法糖,用三個點(...)表示,廣泛應(yīng)用于數(shù)組和對象的操作,本文介紹了其基本用法,如在數(shù)組和對象中的應(yīng)用,合并數(shù)組或?qū)ο?更新對象屬性等,還探討了展開運算符的高級應(yīng)用,需要的朋友可以參考下2024-09-09
怎么在js代碼模式通過代碼觸發(fā)textbox控件的onchange事件呢，經(jīng)過查閱資料，發(fā)現(xiàn)js提供了一個方法，可以觸發(fā)控件的應(yīng)該是所有事件2014-03-03
replace方法的語法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正則表達式對象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串。。2015-04-04
這篇文章主要為大家詳細介紹了Ionic3 UI組件之Gallery Modal的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06