解决layui数据表格显示图片不完整

最新推荐文章于 2022-02-24 14:48:55 发布

原创最新推荐文章于 2022-02-24 14:48:55 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#layui数据表格显示图片

layui 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在layui框架中优化表格渲染过程，通过设置done属性实现表格重载后图片的完整显示，确保用户体验。文章详细解释了表格配置参数及自定义模板的使用。

<table class="layui-table" id="activityTable" lay-data="{height:315, url:'activity/list',response:{statusName:'status',statusCode:'1',msgName:'msg'},done:function(res,curr,count){$('.layui-table-cell').css({'height':'auto'});$('#count').text('共有数据：'+res.count+' 条')},page:true, id:'activityTable',limit:5,limits:[10,20,30,50]}" lay-filter="activity">
        <thead>
        <tr>
          <th lay-data="{checkbox:true}"></th>
          <th lay-data="{field:'id', width:80, sort: true}">ID</th>
          <th lay-data="{field:'title', width:180}">标题</th>
          <th lay-data="{field:'img',width:120,templet:'#imgTpl'}">缩略图</th>
          <th lay-data="{field:'author', width:120}">编辑人员</th>
          <th lay-data="{field:'createtime',width:180,}">创建时间</th>
          <th lay-data="{field:'status',width:80,templet:'#switchTpl',unresize: true}">状态</th>
          <th lay-data="{toolbar: '#barDemo1',width:250}">操作</th>
        </tr>
        </thead>
 </table>
 <script type="text/html" id="imgTpl">
       <div><img src={{d.img}} alt='暂无缩略图'></div>
 </script>

渲染表格的方式可以不同，关键是使用done属性，对表格渲染完成后进行回调设置css样式，这样即使表格重载后，图片依然完整显示

done:function(res,curr,count){
$('.layui-table-cell').css({'height':'auto'}
);