Layui固定列需严格满足四条件:fixed必须为'left'或'right'字符串;height须设具体数值(如400);每fixed列必须配width像素值;横向滚动需手动同步.layui-table-main与固定容器scrollLeft。

fixed: 'left' 或 fixed: 'right' 必须显式写字符串,不能写 true
很多人加了 fixed: true 看起来“写了”,但列根本不固定——Layui 2.8+ 只识别字符串 'left' 或 'right',写成布尔值、数字、空字符串甚至大小写错误(如 'Left')都会静默失效。
正确写法只有两种:
{field: 'id', title: 'ID', width: 80, fixed: 'left'}{field: 'action', title: '操作', width: 150, fixed: 'right'}
注意:fixed: 'right' 的列必须放在 columns 数组的**最后一个位置**,否则 layui 渲染时会中断右固定区收集,导致报错或错位。
height 是硬性前提,没设就等于没开固定功能
固定列依赖表格触发滚动布局。不设 height,表格撑满容器,横向滚动条不出,固定列退化为普通列——不是“效果弱”,而是“压根不激活”。
- 必须设具体数值,如
height: 400;'auto'、'100%'、max-heightCSS 都无效 - 高度要够:至少能显示 5–6 行内容 + 表头 + 分页栏,否则滚动条不出现,固定逻辑跳过
- 调试时务必在 Elements 面板里确认
.layui-table-view的scrollHeight > clientHeight,差 1px 都不行
width 不是可选项,是防止错位的刚性要求
只要加了 fixed,对应列就必须配 width(像素数值),不能只靠 minWidth 或留空。Layui 用三个独立表格模拟固定效果,缺 width 会导致列头与内容宽度脱节。
-
fixed: 'left'列建议width: 60–120;多个左固定列要连续设置且都带width -
fixed: 'right'列(比如操作列)建议width: 150,避免百分比或动态宽 -
cellMinWidth是全局兜底值,对已设width的固定列完全不起作用
漏掉 width 的典型现象:滚动时抖动、列头和内容错位、右侧固定列直接消失。
横向滚动时固定列和主表体不同步?三个 scrollTop 得一起设
固定列不是“粘在页面上”,而是通过独立 DOM 容器(.layui-table-fixed-l、.layui-table-fixed-r)模拟。横向滚动时,主表体(.layui-table-main)和固定列容器的滚动位置默认不联动,必须手动同步。
- 监听
.layui-table-main的scroll事件 - 把它的
scrollLeft同时赋给.layui-table-fixed-l和.layui-table-fixed-r - 注意:不要用
.layui-table-body,那是垂直滚动容器,横向同步要用.layui-table-main
最简同步代码:
$('.layui-table-main').on('scroll', function() {
const left = this.scrollLeft;
$('.layui-table-fixed-l, .layui-table-fixed-r').scrollLeft(left);
});
这个逻辑必须在 table.render() 完成后执行,且 reload 时需重新绑定——否则重载后立即失步。
固定列看着配置简单,但 fixed 值类型、height、width、滚动容器选择这四点,任意一个出错,表现都不是“没反应”,而是“错位/抖动/消失/点击失效”,问题藏在组合里,不是单个参数能排查清楚的。











