Layui table 的 cols 不支持自动响应式列数切换，需手动监听 resize 或初始化时根据 clientWidth 判断并 reload；推荐用 hide 属性配合防抖 reload，避免 CSS 媒体查询导致错位。
layui table 的 cols 配置不支持自动响应式列数切换
layui 的 table.render() 本身没有内置「根据屏幕宽度动态增减列」的机制。所谓“自动切换列数”，实际得靠手动监听 window.onresize + 重新渲染表格，或在初始化时根据 screen.width / document.documentelement.clientwidth 做一次判断。
常见错误是直接写 cols: [[...], [...]] 然后指望它自己缩放——列会堆叠、错位甚至消失，但不会隐藏/显示某几列。
- 真正起作用的是
cols数组里每列的hide属性（布尔值），配合table.reload() - 必须用
table.reload()而不是table.init()或重写 DOM，否则分页、排序等状态会丢失 - 不要在
resize里高频调用 reload——加防抖，比如 150ms 内只执行最后一次
怎么用 screen.width 初始化不同列配置
适合「PC / 平板 / 手机」三级区分，且列结构差异固定。比如 PC 显示 6 列，平板 4 列，手机只留 2 列关键字段。
核心是把列定义拆成多个变量，再按条件选一个：
const colsPC = [[{field:'id', title:'ID'}, {field:'name', title:'姓名'}, ...]];
const colsPad = [[{field:'name', title:'姓名'}, {field:'status', title:'状态'}, ...]];
const colsMobile = [[{field:'name', title:'姓名'}, {field:'op', title:'操作', templet:'#opTpl'}]];
<p>const currentCols = screen.width < 768 ? colsMobile : screen.width < 1024 ? colsPad : colsPC;</p><p>table.render({
elem: '#demo',
url: '/api/list',
cols: currentCols,
// 其他配置...
});
-
screen.width返回设备物理像素宽度，对响应式不够准；更推荐用document.documentElement.clientWidth - 如果用了服务端分页，
reload()会重新请求数据，注意传参一致性（如where） - 模板列（
templet）在不同分辨率下最好保持字段存在，否则可能报Cannot read property 'xxx' of undefined
怎么监听窗口变化并动态 hide/show 列
适合列数变化不大（比如只隐藏 1–2 列）、且不想触发整表重载的场景。本质是操作列的 hide 属性 + table.reload()。
注意：Layui 的列 hide 是“渲染时生效”，所以必须 reload 才能更新视觉。
let tableIns = table.render({ /* 初始化 */ });
<p>function toggleColsByWidth() {
const w = document.documentElement.clientWidth;
table.reload('demo', {
cols: [[
{field:'id', title:'ID', hide: w < 992},
{field:'name', title:'姓名'},
{field:'email', title:'邮箱', hide: w < 768},
{field:'op', title:'操作'}
]]
});
}</p><p>window.addEventListener('resize', debounce(toggleColsByWidth, 150));
-
table.reload()的第一个参数是id（即 render 时传的elemID），不是表格实例 - 每次 reload 都会重绘整张表，频繁触发会影响滚动位置和焦点；若只是隐藏列，可考虑用 CSS
display:none临时 hack，但会破坏 Layui 内部列宽计算 - 移动端 Safari 下
resize触发不及时（比如横竖屏切换），建议补充orientationchange事件
为什么不用 CSS 媒体查询直接控制列显隐
因为 Layui 表格生成的 <td> 没有按字段加 class 或 data 属性，无法精准定位某列。强行写 tbody td:nth-child(3) 会随列顺序、固定列、复选框列等失效。
更麻烦的是：表头（<th>）和内容（<td>）是分开渲染的，CSS 隐藏某列会导致表头和内容错位，且 Layui 的列宽自适应逻辑会被打乱。
- 曾有人尝试给
th加display:none，结果点击排序时 JS 报错：Cannot read property 'field' of undefined - 如果用了
fixed: 'left'或'right'，隐藏中间列会让固定列与主体列脱节，视觉撕裂 - 唯一较稳的 CSS 方案是：只对整行（
tr）做媒体查询，但这就不是“列”响应式了
真要省 reload，不如把列配置做成函数，返回带 hide 的数组，然后在 render 和 reload 里复用——逻辑清晰，也避免漏掉某列的 hide 控制。
