Layui table 响应窗口宽度变化需手动监听 resize 事件，通过 getColsByWidth() 动态生成 cols 并调用 table.reload() 刷新；reload 时须显式传入 page、where、initSort 等参数以保留状态，并添加节流防止卡顿。
layui table 的 cols 配置如何响应窗口宽度变化
layui 的 table.render() 本身不监听窗口 resize，列显隐必须手动控制。核心思路是：初始化时根据当前宽度决定列配置，再在 window.onresize 中重新设置 cols 并调用 table.reload() 刷新表格。
注意：不能直接修改已渲染表格的 options.cols 对象并期望自动生效 —— 必须通过 reload 触发重绘，且每次 reload 都需传入完整的新 cols 数组。
- 推荐在
table.render()外层封装一个生成cols的函数，例如getColsByWidth()，避免重复写列定义 - 首次渲染和 resize 后都调用同一函数获取列配置，保证逻辑一致
-
table.reload()会丢失当前页码、排序等状态，如需保留，需显式传入page、where、initSort等参数
如何判断浏览器窗口宽度并映射到列配置
不需要引入媒体查询或 CSS 类，纯 JS 判断 window.innerWidth 即可。常见分界点参考：768px（平板）、992px（小桌面）、1200px（宽屏）。关键不是像素值本身，而是业务语义：比如“移动端只显示 ID 和操作列”。
示例逻辑：
function getColsByWidth() {
const w = window.innerWidth;
if (w < 768) {
return [[
{type: 'checkbox'},
{field: 'id', title: 'ID', width: 80},
{field: 'operate', title: '操作', toolbar: '#operateTpl', width: 120}
]];
} else if (w < 992) {
return [[
{type: 'checkbox'},
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '姓名', width: 120},
{field: 'operate', title: '操作', toolbar: '#operateTpl', width: 120}
]];
} else {
return [[
{type: 'checkbox'},
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '姓名', width: 120},
{field: 'email', title: '邮箱', width: 180},
{field: 'status', title: '状态', width: 100},
{field: 'operate', title: '操作', toolbar: '#operateTpl', width: 120}
]];
}
}
使用 table.reload() 时必须传哪些参数才不丢状态
如果表格启用了分页、排序或搜索，直接 table.reload({ cols: newCols }) 会导致回到第 1 页、清除排序箭头、清空搜索关键词。必须显式保留这些状态：
-
page：从table.config中读取当前页码和每页条数，例如{curr: table.config.page.curr, limit: table.config.page.limit} -
where：包含搜索条件的对象，通常来自表单或自定义查询参数，需自行维护一个全局whereParams变量 -
initSort：若支持排序，需传入当前排序字段和类型，例如{field: 'id', type: 'desc'}，可从table.config.initSort获取 - 所有非 cols 相关的原始配置项（如
url、method、parseData）不用重复传，reload会继承原始配置
为什么 resize 频繁触发会导致表格卡顿或错乱
浏览器 resize 事件可能在几毫秒内连续触发数十次，每次调用 table.reload() 都会重建 DOM，极易造成卡顿甚至渲染异常（如列宽错位、复选框错行）。
必须加节流（throttle），推荐使用 200ms 延迟 + 最后一次触发保障：
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
table.reload({
cols: getColsByWidth(),
page: {curr: table.config.page.curr, limit: table.config.page.limit},
where: whereParams,
initSort: table.config.initSort
});
}, 200);
});
更稳妥的做法是：在 table.render() 成功回调中绑定 resize 监听，并把 table 实例和 whereParams 存为闭包变量，避免全局污染和引用丢失。
真正容易被忽略的是：列宽（width）在不同屏幕下应做适配，而不是固定像素 —— 比如邮箱列在小屏下设为 120，大屏下设为 180；否则即使列没隐藏，内容也会被截断或撑开表格容器。
