layui的table中显示图片

短命女 2022-02-25 10:24 342阅读 0赞

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，342人围观）

还没有评论，来说两句吧...

相关阅读

相关若依前端table中如何显示图片？

> 图片预览 `$.table.imageView` { field: 'avatar', title: '用户头像', form

雨点打透心脏的1/2处/ 2023年10月01日 07:28/ 0 赞/ 28 阅读

相关 layui 实现鼠标指向table中的图片放大显示图片

这个功能的实现，网上有不少，但是之前自己查阅的时候总是实现不了，后来同事刘表哥大佬，查阅了一下，加上自己的一些想法，实现了该功能， c v 即可使用，就感觉蛮不错的，代码理解

ゝ一世哀愁。/ 2023年07月25日 14:25/ 0 赞/ 10 阅读

相关 layui的table显示图片后，头部复选框变多了

一. 问题背景现象如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

朱雀/ 2023年07月15日 15:16/ 0 赞/ 148 阅读

相关 element ui table显示本地图片

背景：后端返回一个状态码，需要根据状态码显示对应的本地图片。第一步：写column。注意前面要加一截路径，比如这里…/assets/

深碍√TFBOYSˉ_/ 2022年12月15日 03:55/ 0 赞/ 284 阅读

相关 vue iview table显示图片

使用render渲染图片的代码： ![70][] 其中，图片的地址应该是使用attrs而不是经常使用的props，这点坑了自己很久。然后就是图片要想访问得到有两种方式

旧城等待，/ 2022年05月21日 08:51/ 0 赞/ 279 阅读

相关 layui table表格需要序号来显示条目数

![70][]s tittle 序号为显示字段可以改为任何名字 ![70 1][] [70]: /images/20220515/3727b5cb78a745d

冷不防/ 2022年05月15日 04:53/ 0 赞/ 238 阅读

相关 layui的table中显示图片

layui table动态表格代码 layui.use('table', function(){ var table = layui.tabl

短命女/ 2022年02月25日 10:24/ 0 赞/ 343 阅读

相关 layui数据表格显示图片/头像

先上代码 templet: '<div><img style="height:35px;width:35px;border-radius:50%;line-he

清疚/ 2022年02月20日 06:13/ 0 赞/ 607 阅读

相关 layui的table中显示图片

图片需要用到模板.templet: 注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计style <script type="

ゝ一世哀愁。/ 2021年09月26日 12:30/ 0 赞/ 472 阅读

相关 layui中table显示图片

在table页面中加如下css .layui-table-cell{ text-align: center; height: auto; white-space: n

Bertha 。/ 2021年09月23日 11:50/ 0 赞/ 397 阅读