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>

 

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Layui表格中,要实现文本超出隐藏并显示省略号,可以使用CSS样式来控制。首先,需要在样式中设置`.layui-table-cell`类的高度为`auto`,同时设置`white-space`属性为`normal`。这样可以让表格单元格的高度自适应,并且允许文本换行。接下来,在表格渲染完成后,可以通过JavaScript代码来设置表格每行的高度。具体可以使用`done`属性来监听渲染完成事件,在回调函数中遍历每一行,然后设置左右两侧固定表格的行高与主表格行高保持一致。这样就可以实现表格中文本超出隐藏并显示省略号的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [layui 表格数据太长导致...省略号问题,表格数据过长加行高显示](https://blog.csdn.net/weixin_50896519/article/details/123112094)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [解决layui表格内文本超出隐藏的问题](https://download.csdn.net/download/weixin_38603204/12937193)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值