table.reload()是唯一可靠方式，直接修改config.cols无效；必须显式传入新cols数组并同步page.curr、initSort等状态参数，确保字段名、templet等列级配置完整，避免渲染错乱。
table.reload() 是唯一可靠方式，别碰 config.cols 直接赋值
直接改 table.config['id'].cols 或写死 table.config.cols = newcols 完全无效——layui 表格渲染后，cols 就不是响应式属性了。dom 不会更新，排序、导出、列宽都会错乱，甚至点击表头无反应。
必须用 table.reload() 触发重载，并显式传入新 cols 数组。这不是“刷新数据”，而是重建列结构。
- 新
cols中每个对象的field必须和后端返回字段名严格一致，大小写、下划线都不能错 - 如果用了
templet、toolbar、unresize等列级配置，得一并写进新cols，不能只改title - 别漏掉
defaultToolbar和autoSort这类表格级配置，reload 时不传就会回退到初始值
按钮点击时怎么安全传入新列配置
监听原生 click 即可，不需要 form.on('select') 或其他封装。关键是把列定义提前抽成变量，避免在回调里拼字符串或硬编码。
例如：
const userCols = [[{field:'id', title:'ID'}, {field:'name', title:'姓名'}, {field:'email', title:'邮箱'}]];
const simpleCols = [[{field:'name', title:'姓名'}, {field:'op', title:'操作', templet:'#opTpl'}]];
document.getElementById('switch-cols-btn').addEventListener('click', function() {
table.reload('data-table', {
cols: simpleCols,
page: { curr: table.cache['data-table']?.page?.curr || 1 },
where: table.cache['data-table']?.where || {}
});
});
- 用
table.cache['data-table']?.page?.curr拿当前页码，否则默认回到第 1 页 -
where也建议同步传，防止切换列后搜索条件丢失 - 如果列结构差异大（比如某列在 A 版本有
templet，B 版本没有），务必在对应cols变量里完整声明，别依赖“继承”
列切换后排序/分页状态异常？检查 initSort 和 page.curr 是否显式传入
常见现象：点按钮切列后，表头排序箭头消失、点击排序没反应、翻页跳回第 1 页——根本原因是 reload() 没传关键状态参数。
-
initSort必须显式传，格式如{ field: 'name', type: 'asc' }，否则后端收不到排序参数，前端箭头也不显示 -
page: { curr: X }必须带，X 来自table.config['id'].page.curr或缓存，不能省略 - 如果用了
limit自定义每页条数，也要在page里带上，例如{ curr: 2, limit: 20 } - 别传
done回调，除非真要覆盖原有逻辑；否则可能丢掉你写的加载完成处理
动态列切换容易被忽略的兼容性细节
列切换不是纯前端行为，它会影响后端请求结构和前端渲染表现，几个坑必须提前对齐：
- 后端接口返回字段必须和当前
cols的field完全匹配，少一个字段，对应列就空；多一个字段，不展示也没报错，但浪费流量 - 如果某列在不同视图中需要不同
templet（比如用户视图显示头像，订单视图显示金额图标），模板 ID 要提前注册好，且确保script[type="text/html"]在 DOM 中存在 - 列宽（
width）不会自动继承，如果某些列设了固定宽度，记得在新cols里也带上，否则可能挤在一起或超宽 - 移动端下隐藏列推荐用
hide: true+table.reload()，而不是删掉整个列对象——后者会导致列索引错位，影响checkbox或radio列行为
列定义一旦拆成多个变量，就别在 reload 时临时拼数组；每次传进去的 cols 必须是完整、合法、已验证过的二维数组结构。
