layui table 固定右侧操作列的原理是将配置了 fixed: 'right' 的最后一列复制到独立的右侧固定容器（.layui-table-fixed-r）中，并通过JS同步滚动、宽度与事件。必须满足：列在 columns 末尾、显式设 fixed: 'right'、避免百分比/动态宽；失效常因父级 overflow: hidden、height 不足、异步 templet 或 CSS 覆盖 position 导致。
layui table 固定右侧操作列的原理是什么
layui 的 fixed: 'right' 是唯一原生支持的右固定方式，但它只对整列生效，且要求该列必须放在 columns 配置的末尾。很多人试图把操作列写在中间再设 fixed: 'right'，结果列不固定、样式错乱甚至控制台报错 uncaught typeerror: cannot read property 'width' of undefined——这是因为 layui 渲染时会按顺序遍历 columns，遇到第一个 fixed: 'right' 就开始收集“右固定区”，后续列若没加该配置，会被当作普通列处理，导致宽度计算断裂。
怎么正确配置 fixed: 'right' 操作列
必须满足三个硬性条件：
- 操作列定义必须放在
columns数组的**最后一个位置**（不能是倒数第二，不能被其他非 fixed 列隔开） - 该列必须显式设置
fixed: 'right'，不能依赖默认或继承 - 避免给该列设
minWidth或动态width（尤其不要用百分比），否则固定区宽度会塌缩或溢出
示例写法：
columns: [[
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '姓名', minWidth: 120},
{field: 'action', title: '操作', fixed: 'right', width: 160, align: 'center', toolbar: '#actionBar'}
]]
为什么加了 fixed: 'right' 还是不固定
常见失效原因有四个：
- 表格容器父级元素设置了
overflow: hidden，把固定列裁掉了（检查 .layui-table-box 和其祖先） - 用了
height配置但没设足够高度，导致滚动条未触发，固定列无意义 - 列中用了
templet返回异步内容（如$.get()），渲染完成前固定区已计算完毕，列宽为 0 - 启用了
skin: 'row'或自定义 CSS 覆盖了 .layui-table-fixed-r 的position: absolute和right: 0
固定操作列后点击事件失效或错位
这是最隐蔽的问题：固定列实际是复制了一份 DOM 到右侧独立容器（.layui-table-fixed-r），但事件绑定仍挂在原始列上。如果你用 table.on('tool(test)', ...)，它能正常触发；但若手动用 $('.layui-table-view .layui-table-fixed-r').on('click', '.btn-del', ...)，就可能因 DOM 复制时机问题拿不到元素，或点击位置映射错误。
- 永远优先用 layui 的内置事件监听（
table.on('tool(你的lay-filter)')） - 避免在
templet中写内联onclick，改用event.stopPropagation()防止冒泡干扰 - 如果必须操作固定区 DOM，等
done回调执行后再查$('.layui-table-fixed-r .layui-table-body')
固定列不是“悬浮图层”，而是两套并行的 DOM 结构，列宽、滚动同步、事件代理都靠 layui 内部 JS 维持。任何绕过它的直接 DOM 操作，大概率会断掉同步链。
