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>