Layui表格需动态生成cols配置以实现列显隐：依据后端返回的columns字段数组映射列定义，确保field与数据key一致，并在templet中判空防报错。
后端返回字段结构决定列显隐的判断逻辑
layui 的 table.render() 本身不支持“根据字段存在与否自动隐藏列”，必须手动控制 cols 配置。关键在于：把列定义从写死改为动态生成，依据后端返回的字段元数据（比如 columns 数组或 fields 列表）构造 cols[0]。
常见错误是直接在 cols 里写死所有字段，导致后端某列没返回时页面仍留空格或报错 Cannot read property 'xxx' of undefined。
- 后端需额外返回一个字段描述数组，例如：
{ "columns": ["id", "username", "email", "status"] } - 前端拿到该数组后，用
map()构建列配置，只包含后端声明的字段 - 每列的
field必须与后端实际返回的数据 key 完全一致（注意大小写、下划线） - 若某列需要格式化（如状态转文字），在
templet中加判空逻辑，避免row.xxx报错
动态生成 cols 并安全绑定 field
不要把 cols 写成静态数组，而是从后端字段列表映射出列配置。重点是：字段名存在才加列，且每个 field 值必须可被 row[field] 安全读取。
示例片段：
// 假设 ajax 成功后拿到 data = { columns: ['id','name','score'], list: [...] }
const colsConfig = data.columns.map(key => {
const colDef = { field: key, title: key }; // 可按 key 映射中文标题，如 { id: '编号', name: '姓名' }
if (key === 'score') {
colDef.templet = '<div>{{d.score || "-"}}</div>';
}
return colDef;
});
table.render({
elem: '#demo',
cols: [colsConfig], // 注意是数组套数组
data: data.list,
// 其他配置...
});
-
cols是二维数组，外层数组对应表格行（通常只有一行表头），内层才是列数组 - 如果后端返回的
columns是空数组，colsConfig就是空数组，渲染时会显示“暂无数据”——这是合理行为 - 避免在
templet中直接写{{d.xxx}}，应统一用{{d[field] || '-'}}或加if判断
后端未返回字段时 row 对象缺失 key 的兼容处理
Layui 渲染时，若某列 field: "phone"，但某条数据 row 没有 phone 属性（后端没传），模板引擎会报 Cannot read property 'phone' of undefined，整行渲染失败。
- 最稳妥是在后端保证返回数据结构一致（推荐），或在前端用
parseData统一补全字段：parseData: res => { return { data: res.data.map(d => Object.assign({ phone: '' }, d)) } } - 不用
lay-data或data-field等 HTML 方式定义列，它们无法动态化 - 如果使用
templet函数而非字符串模板，函数参数d就是完整row，可自由判空：templet: d => d.phone || '<span class="gray">-</span>'
字段别名与多级嵌套字段的注意事项
当后端返回的是嵌套结构（如 { user: { name: '张三' } }）或字段带别名（如 "user_name"），field 不能直接写 "user.name" —— Layui 不支持点号路径解析。
- 要么后端扁平化数据（推荐），例如返回
{ userName: '张三' }，field: 'userName' - 要么用
templet函数手动取值：templet: d => d.user?.name || '' - 若用 laytpl 字符串模板，
{{d.user && d.user.name}}可行，但不如函数模板清晰可控 - 字段名含特殊字符（如
user-name）会导致row["user-name"]访问失败，后端应改用下划线或驼峰
真正麻烦的不是“怎么让列消失”，而是“字段缺失时如何不让整个表格崩掉”。动态列只是表象，底层要解决的是数据契约一致性问题。
