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)文章
這篇文章主要介紹了js父頁面與子頁面不同時顯示的方法,打開一個頁面后,父頁面DISABLE,在子頁面關(guān)閉后,父頁面ENABLE,是比較實用的技巧,需要的朋友可以參考下2014-10-10
生命周期是指一個對象從創(chuàng)建→>運行>銷毀的整個階段，強調(diào)的是一個時間段，文中介紹了小程序中組件的生命周期，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了如何將字符串中的每個單詞的首字母變?yōu)榇髮?需要的朋友可以參考下2014-04-04
這篇文章主要介紹了微信小程序列表埋點曝光指南，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了JS常見面試試題,總結(jié)分析了javascript去重、遍歷、閉包、繼等相關(guān)算法與操作技巧,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)搜索框功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
我們已經(jīng)知道，null 沒有任何的屬性值，并且無法獲取其實體（existence）值。所以 null.property 返回的是錯誤（error）而不是 undefined 。2008-08-08
uni-app常用的幾種頁面跳轉(zhuǎn)方式總結(jié)
uni-app的頁面跳轉(zhuǎn)和小程序和vue很相似,只是方法和標簽有所不同,這篇文章主要給大家介紹了關(guān)于uni-app常用的幾種頁面跳轉(zhuǎn)方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
使FORM表單的的所有元素不可編輯的方法有很多，在本文將為大家詳細介紹下，js是如何做到的，感興趣的朋友不要錯過2013-10-10
js 獲取后臺的字段 改變 checkbox的被選中的狀態(tài) 代碼
js 獲取后臺的字段 改變 checkbox的被選中的狀態(tài) 代碼，需要的朋友可以參考一下2013-06-06