列宽持久化需手动实现:存取 minwidth 到 layui.data(),key 含表格唯一标识;初始化时在 render 前 merge 到 cols;拖拽后在 done 回调中监听 mouseup 更新缓存。
列宽持久化不是 layui 内置功能,必须手动读写 localstorage 或 layui.data(),且需在 table.render() 的 done 回调中操作 dom 状态。
列宽状态该存什么、存在哪
layui 表格不自动记录列宽,你只能自己存 minWidth(不是 width)——因为只有 minWidth 是真正生效的列宽控制项。存错字段会导致恢复无效。
- 推荐用
layui.data(),比原生localStorage.setItem()更安全:它自动 JSON 序列化/反序列化,且支持表名隔离 - key 命名要带表格唯一标识,比如
'table-widths-demo-v2.8.18';避免多个表格共用同一 key 导致互相覆盖 - 不要存整个
cols数组,只存一个对象映射:{'id': 80, 'name': 150, 'remark': 200} - 如果表格有固定列(
fixed: 'left'),也要一并存进去,否则恢复时布局错乱
初始化时怎么把宽度“塞回去”
必须在 cols 配置生成后、table.render() 调用前,把缓存值 merge 进对应列的 minWidth 字段。不能等渲染完再改 DOM 宽度——layui 会立刻覆盖。
- 先读缓存:
var widths = layui.data('table-widths-demo-v2.8.18') || {}; - 遍历
cols[0],对每列检查field是否在widths中,是则赋值:col.minWidth = widths[col.field] || col.minWidth; - 特别注意:如果列没设
field(比如复选框列{type: 'checkbox'}),可用title或加个自定义data-id作 fallback 键名 - 别忘了给
totalRow列也同步设置minWidth,否则页脚行会拉伸整列
拖拽结束时怎么更新存储
layui 没提供列宽变更事件,得靠监听鼠标事件 + DOM 变化来捕获。最稳的方式是在 done 回调里为每个表头单元格右侧插入透明拖拽条,并绑定 mouseup。
- 拖拽松手后,从当前
<th> 的 <code>style.minWidth或计算后的offsetWidth读取实际宽度(建议取parseInt(getComputedStyle(th).minWidth)) - 更新缓存:
layui.data('table-widths-demo-v2.8.18', {key: col.field, value: newWidth}); - 避免高频触发:加个
setTimeout防抖,或只在mouseup且宽度变化超过 5px 时才存 - 别用
resize事件——layui 表格不触发它;也别监听mousemove存,太卡且冗余
最易被忽略的是:列宽恢复逻辑必须在 cols 构造阶段完成,而不是渲染后 patch;而拖拽监听必须等 done 执行完、DOM 真实就位后再挂载——早了找不到元素,晚了用户第一次拖拽就存不进缓存。











