layui table表格帶圖片，圖片顯示不全問題

這個平時沒有注意過，今天有人問到，就記錄一下吧

layui的表格使用非常簡單，layui文檔中已經非常詳細，下面直接上代碼了

1.jsp代碼

        <div class="demoTable">
           <button class="layui-btn" data-type="publish">發布Banner</button>
    </div>
    <table class="layui-hide" id="banner"></table>

2. 然后是js代碼

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是數據對應的字段名

這還不夠，接下來的才是關鍵，因為此時此刻你的表格是這個樣子的

 

 這個圖片壓根顯示不全，可以這樣來解決

    <div class="demoTable">
           <button class="layui-btn" data-type="publish">發布Banner</button>
    </div>
    <table class="layui-hide" id="banner"></table>
 
<style type="text/css">
    .layui-table-cell{
        text-align:center;
        height: auto;
        white-space: normal;
    }
</style>

可以看到我在底部加上了樣式，這里有優先級的問題，所以必須是放在最下面，謹記！！！

但是目前效果是這樣的：

 

貌似高度好了，但是這個寬是什么鬼，於是我就F12了一下

 

 

 

 原來如此，layui內部定義了這么一個樣式，所以話不多說，改！

<style type="text/css">
.layui-table-cell{
    text-align:center;
    height: auto;
    white-space: normal;
}
.layui-table img{
    max-width:300px
}

 

 

 

加入了.layui-table img樣式后，就統統搞定了，我這里只是設了固定大小，你們可以隨意了~

最終效果：

 

 

轉載：https://blog.csdn.net/qq_30548105/article/details/90438834

 

--------------------------------------------------------------------自己項目-------------------------------------------------------------

 

 

 

 

//課時班
        table.render({
            elem: '#currentTableId',
            url: "/admin/course/course_json_list",
            toolbar: '#toolbarDemo',
            defaultToolbar: [],
            title: '課時班列表',
             // height: 'full-500',
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 100, title: '課程ID', unresize:true, sort: true},
                {field: 'cover_img', width: 150, title: '封面',  templet:'<div> <img  class="bianping" src="{{d.cover_img}}"/></div>'},
                {field: 'course_name', width: 150, title: '課程名稱'},
                {field: 'create_time', width: 180, title: '創建時間'},
                {fixed: 'right',title: '操作', minWidth: 180, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [50, 150, 200],
            limit: 50,
            page: true,
            parseData: function(res){ //將原始數據解析成 table 組件所規定的數據
                return {
                    "code": res.code, //解析接口狀態
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析數據長度
                    "data": res.data.data //解析數據列表
                };
            },
            request: {
                pageName: 'page' // 頁碼的參數名稱，默認：page
                , limitName: 'size' //每頁數據量的參數名，默認：limit
                //頁碼和顯示數量
            },where: {
                //傳值 startDate : startDate,
                type:1,
            },
        });

    <style>
     
        .layui-table-cell{
            text-align: center;
           height: auto;
            white-space: normal;
        }
    </style>