Layui 表格 list页显示图片

        // 表格渲染
        var tableIns = table.render({
            elem: '#dateTable'                  //指定原始表格元素选择器(推荐id选择器)
            , id: 'dateTable'
            , even: true //开启隔行背景
            //, size: 'sm' //小尺寸的表格
            , height: 'full-150'    //容器高度
            , cols: [[
                  {field: 'id', title: '商品ID', sort: true, width: 80 , align: 'center'} 
                , {field: 'img1', title: '图片',width: 130 , align: 'center',templet:'<div><img style="height:100px;width:100px;" src="{{d.img1}}"></div>'}
                , {field: 'parentTypeName', title: '一级分类', width: 100 , align: 'center'}
                , {field: 'typeName', title: '二级分类', width: 120 , align: 'center'}
                , {field: 'name', title: '商品名称',width:350 , align: 'center'}
                , {field: 'discountName', title: '活动名称',width:350 , align: 'center'}
                , {field: 'prince', title: '商品原价', width: 100 , align: 'center'}
                , {field: 'realprice', title: '商品现价', width: 100 , align: 'center'}
                , {field: 'minLimite', title: '最小限购', width: 100 , align: 'center'}
                , {field: 'color', title: '颜色', width: 110 , align: 'center'}
                , {field: 'postage', title: '邮费', width: 80 , align: 'center' }
                , {field: 'remarks', title: '备注', width: 120 , align: 'center'}
                , {fixed: 'right', title: '操作', width: 320, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
            ]]
            , url: '#(ctxPath)/wmall/admin/commodityList/tableData'
            , method: 'get'
            , request: {
                pageName: 'pageNumber' //页码的参数名称,默认:page
                ,limitName: 'pageSize' //每页数据量的参数名,默认:limit
            }
            , page: true
            , limits: [30, 60, 90, 150, 300]
            , limit: 30 //默认采用30
            , loading: true
            , done: function (res, curr, count) {
            }
        });

样式

<style type="text/css">
td div.layui-table-cell{height:100px;
     line-height: 100px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0px 15px;
    overflow: hidden;
    }
</style>

猜你喜欢

转载自blog.csdn.net/weixin_41690497/article/details/84565891