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

图片自适应表格CSS

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

css 复制代码
/*layui-table图片自适应*/
.layui-table-cell {
    height: auto;
    line-height: 20px;

}

.layui-table-cell img {
    height: 50%;
    max-width: 50%;
}

列代码

javascript 复制代码
, 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这个属性。

解决方案

去除复选框的fixed属性即可。

相关推荐
江城开朗的豌豆4 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙5 小时前
GIT 配置别名&脚本自动化执行
前端·git
再吃一根胡萝卜5 小时前
🔍 当 `<a-menu>` 遇上 `<template>`:一个容易忽视的菜单渲染陷阱
前端
Asort5 小时前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney5 小时前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥5 小时前
前端必学的 CSS Grid 布局体系
前端·css
EMT5 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare5 小时前
选择文件夹路径
前端
艾小码5 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月5 小时前
JavaScript作用域与作用域链详解
前端·面试