layui表格展示图片

layui表格里展示图片，解决图片展示不全问题

1.先看效果

2.js里layui表格代码
在放图片的列里使用自定义模板

 , cols: [[
      {type: 'checkbox', fixed: 'left', style: "height:90px;"}
       , {type: 'numbers',title:'序号', style: "height:90px;"}
       , {field: 'carouselId', title: 'ID', sort: true,hide:true}
       , {field: 'carouselUrl', title: '轮播图', align: 'center', templet: "#imgtmp" }
       , {field: 'redirectUrl', title: '跳转链接'}
       , {field: 'sort', title: '排序值', sort: true,width:150}
       , {field: 'createTime', title: '添加时间', sort: true},
       , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
   ]],

3.自定义templet模板，在script标签中用一个img标签

<script type="text/html" id="imgtmp">
   <img src="/{{d.carouselUrl}}" style="width: 200px">
 </script>

4.layui固定的列要设置高度，不然会乱

5.layUI内置有样式，存在优先级问题，要在底部加上自己的样式，不然图片显示不全

<style type="text/css">
    .layui-table-cell{
        text-align:center;

        height: auto;

        white-space: normal;

    }

    .layui-table img{
        max-width:300px
    }
</style>

layui-table img的宽度可以自行设置