layui列表显示缩略图_layui 表格中实现照片预览，点击查看原图

您可以使用layui中的table组件的templet属性来实现表格中的照片预览功能。具体实现步骤如下：

1.在表格中需要显示照片的列中添加一个自定义模板列，例如：

{field:'photo', title:'照片', templet:'#photoTpl'}

2.在页面中添加一个隐藏的模板，用来展示照片预览的HTML代码，例如：

<script type="text/html" id="photoTpl">
  <div class="layui-table-cell laytable-cell-1-photo">
    <img src="{{d.photo}}" class="layui-upload-img" lay-event="showPhoto" style="max-width:50px;max-height:50px;">
  </div>
</script>

3.在页面中添加一个弹窗用来展示原图，例如：

// 点击查看原图
table.on('tool(test)', function(obj){
  var data = obj.data;
  if(obj.event === 'showPhoto'){
    layer.open({
      type: 1,
      title: false,
      closeBtn: 1,
      area: ['auto', 'auto'],
      skin: 'layui-layer-nobg', //没有背景色
      shadeClose: true,
      content: '<img src="'+data.photo+'" style="max-width:100%;max-height:100%;">'
    });
  }
});

4.最后，需要在表格渲染时指定lay-filter属性，并且在页面中引入layui的相关库文件，例如：

<table id="test" lay-filter="test"></table>

<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">

这样就可以在表格中实现照片预览的功能了。