layui表格列宽拖拽需手动实现：在th右边界插入透明拖拽条，mousedown记录初始状态，document监听mousemove动态改style.width，mouseup时存localstorage（key为table-id-field），渲染前读缓存注入cols的minwidth生效。
列宽拖拽时如何正确捕获鼠标事件并更新 localStorage
直接监听 mousemove 在 table 上会失效——因为列宽调整本质是拖拽 col 边界，而原生 HTML 表格不支持对 col 元素绑定鼠标事件。实际可行路径是：在 th 或 td 的右边界（用伪元素模拟拖把手）上监听 mousedown，记录起始位置和当前列索引，再在 document 上监听 mousemove 和 mouseup，动态修改该列的 style.width。
关键点：
- 必须使用
document.addEventListener('mousemove', ...)而非table.addEventListener，否则鼠标移出单元格就中断拖拽 - 更新宽度后立即写入
localStorage，键名建议用表 ID + 列索引组合，例如myTable_col_2_width - 注意防抖：连续拖动时不要每像素都存，可用
requestAnimationFrame节流，或只在mouseup后统一保存
如何从 localStorage 恢复列宽且不破坏响应式布局
直接给 th 设置 width 行内样式会覆盖 CSS 中的 min-width 或媒体查询规则，导致小屏下表格溢出。正确做法是优先用 style.minWidth，仅当用户明确拖宽才设 style.width，并在恢复时做判断：
- 读取
localStorage值后，先检查是否为有效像素值（如/^\d+px$/.test(value)），避免 NaN 或空字符串污染样式 - 若值存在且大于默认最小宽度（比如
100px），则设th.style.width = value；否则设th.style.minWidth = value - 不要在 DOMContentLoaded 时立刻应用，应等
table渲染完成（可用requestAnimationFrame或offsetWidth触发重排后再设）
跨浏览器兼容性问题：Firefox 不触发 colgroup 宽度继承
Chrome 和 Safari 下给 col 设 width 可生效，但 Firefox 对 col 的样式支持弱，常忽略 style.width。稳妥方案是绕过 col，直接操作第一行 th 的 style.width，并让后续行 td 自动对齐：
- 只对
thead th设置宽度，tbody td不手动干预，靠表格自动对齐机制 - 避免使用
colgroup—— 它在 localStorage 恢复时容易因 DOM 顺序错位导致列错位 - 如果必须用
colgroup，需确保其col数量与实际列数严格一致，且初始化时就插入 DOM，不能动态追加
性能陷阱：频繁读写 localStorage 导致主线程卡顿
localStorage 是同步阻塞 API，高频拖拽中反复调用 localStorage.setItem() 会让 UI 明显卡顿，尤其在旧设备或大表格（>50 列）场景下。
- 把写入延迟到
mouseup后执行，而非mousemove中实时写 - 用
try...catch包裹localStorage.setItem()，防止配额超限（通常 5MB）导致静默失败 - 可加一层内存缓存：用对象暂存宽度值，仅在页面卸载前（
beforeunload）或用户主动保存时批量写入 - 不要用
JSON.stringify存整个表格状态——单列存单个键更轻量、更易调试
最麻烦的不是实现，而是列宽记忆和 CSS Grid / flex 布局混用时的冲突，这种组合几乎必然失效，得先确认表格没被外部框架（如 Bootstrap table、Ant Design）接管渲染逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
