layui的table中显示图片

最新推荐文章于 2024-12-27 14:12:58 发布

原创最新推荐文章于 2024-12-27 14:12:58 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui表格 #layui #图片

本文介绍了一种使用layui框架实现动态表格的方法，并解决了表格中图片显示不全的问题。通过调整layui样式的高度属性，使得表格能够适应不同大小的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui table动态表格代码

layui.use('table', function(){
        var table = layui.table;
        //渲染
        window.ins1 = table.render({
            elem        : '#test'
            ,height     : 520
            ,title      : '表格名称'
            ,url        : 你的接口名称
            ,autoSort   : false
            ,loading    : true
            ,totalRow   : true
            ,limit      : 10
            ,toolbar    : '#toolbarDemo'
            ,cols       : [
                [
                    {field:'img'       , title:'图片预览'  , width:260,templet:function (d) {
                        return '<img src='+d.img+' />';
                    }}
                    ,{field:'id'        , title:'ID'        , width:200, unresize: true}
                    ,{field:'remark'    , title:'备注'      , width:500,edit: 'text'}
                    ,{field:'href'      , title:'图片链接'  , width:400,edit: 'text'}
                    ,{title:'操作'      , toolbar: '#barDemo', width:150}
                ]
            ]
            ,id     : 'test'
            ,page   : false
        });
});

使用上面的配置之后你会发现图片显示不全，图片大小受表格高度限制，所以在你的页面添加如下样式

更改layui样式使图片显示


    <style type="text/css">
        .layui-table-cell{
            height:auto!important;
            white-space:normal;
        }
    </style>

layui表格

<table class="layui-hide" id="test" lay-filter="test"></table>