layui框架实战案例(21)：layui table单元格显示图片导致复选框冗余的解决方案

在这里插入图片描述

图片自适应表格CSS

为防止单元格内的图片不能正常显示，需本地重写CSS。

/*layui-table图片自适应*/
.layui-table-cell {height: auto;line-height: 20px;}.layui-table-cell img {height: 50%;max-width: 50%;
}

列代码

, cols: [[{type: 'checkbox',fixed:'left', width: 80}, {field: 'but_id', title: 'ID', sort: true, hide: true}, {field: 'but_serial', title: '编号', sort: true}, {field: 'but_name', title: '姓名', sort: true}, {field: 'but_phone', title: '联系电话', sort: true}, {field: 'but_url', title: '工作照片', align: 'center', width: 120, templet: function (d){return '<div οnclick="previewImg(\'' + d.but_url + '\');" style="cursor: pointer;"><img src="' + d.but_url + '" width="30" height="50"/></div>';}}, {field: 'lock', title: '操作', templet: '#checkboxTpl', unresize: true, align: 'center', width: 200}]]

在layui中，fixed:'left’是一个属性，用于规定表格列的固定位置。当这个属性被设置为’left’时，它表示表格的这一列将会被固定在左侧，即无论用户如何滚动页面，这一列都会保持在左侧。类似于其他的CSS样式属性，可以通过这个属性来控制表格的布局和用户的视觉体验。需要注意的是，如果需要固定的是两个以上的列，那么前面的每一列都需要加上fixed这个属性。