必须在 table.render() 执行前根据角色生成静态 toolbar 字符串；toolbar 不支持运行时条件渲染，仅接受 true、模板 id 或 html 字符串，需结构化配置按钮并同步获取角色权限。
必须在 table.render() 执行前，根据角色拼出 toolbar 字符串；运行时隐藏按钮或重绘表格会绕过权限校验，且破坏 layui 内部状态。
toolbar 不支持运行时条件渲染，只能传静态 HTML 或模板 ID
Layui 的 toolbar 参数只接受三种值：true（启用默认图标）、'#toolbarDemo'（指向 <script type="text/html"></script> 模板）、或直接的 HTML 字符串。它不识别 JS 表达式、不执行模板引擎逻辑（除非你手动用 laytpl 渲染），更不会响应 window.USER_ROLE 变化后自动重绘。
常见错误是写成这样：
toolbar: '<button lay-event="export">导出</button>' + (window.USER_ROLE === 'admin' ? '<button lay-event="sync">同步</button>' : '')
看似能跑，但隐患大：字符串拼接易 XSS；角色变量未定义时整个 toolbar 为空；后续无法统一维护按钮配置。
- 正确做法是把所有按钮定义为带
role字段的数组，再用.filter()和.map()生成最终 HTML - 确保
window.USER_ROLE在table.render()前已就绪（比如后端内联到 HTML 中，或由前置 JS 加载完成） - 避免用
innerHTML +=动态追加，防止多次执行导致重复按钮
按钮配置要结构化，别硬编码在 HTML 字符串里
把按钮定义抽成纯数据对象，每个含 id、text、role（支持数组），后续增删改都只动配置，不动逻辑。
例如：
const toolbarBtns = [
{ id: 'add', text: '新增', role: ['admin', 'editor'] },
{ id: 'export', text: '导出', role: ['admin', 'analyst'] },
{ id: 'import', text: '导入', role: ['admin'] }
];
然后过滤并生成 HTML：
const userRole = window.USER_ROLE || 'guest';
const allowedBtns = toolbarBtns.filter(btn => btn.role.includes(userRole));
const toolbarHtml = allowedBtns.map(btn =>
`<button class="layui-btn layui-btn-sm" lay-event="${btn.id}">${btn.text}</button>`
).join('');
-
lay-event值必须唯一，否则table.on('toolbar(filter)', ...)无法区分事件来源 - 按钮文字不要依赖后端返回字段动态插值（如
${data.exportText}），因为 toolbar 是全局的，没有d上下文 - 如果角色是后端通过 API 返回的，务必在调用
table.render()前 await 角色加载完成，不能靠setTimeout等
监听事件时，filter 值必须和表格的 lay-filter 严格一致
自定义按钮点击后，事件监听靠的是 table.on('toolbar(filter)', ...)，其中 filter 是表格配置里的 lay-filter 值，不是 ID、不是类名、也不是按钮的 lay-event。
例如表格初始化时写了：
table.render({
elem: '#userTable',
lay-filter: 'userTable', // ← 这个值决定了监听器的 filter 参数
toolbar: toolbarHtml,
// ...
});
那监听就必须写成：
table.on('toolbar(userTable)', function(obj){
if(obj.event === 'export'){
// 处理导出
}
});
- 漏掉括号里的
userTable，或写成'toolbar(#userTable)'、'toolbar(user-table)'，事件永远不会触发 - 多个表格共用同一套按钮配置时，
lay-filter必须不同，否则一个表格的按钮点击会触发所有表格的监听器 -
obj.event就是按钮的lay-event值，不是按钮文本，也不是 DOM 属性
真正容易被忽略的点是：角色判断必须发生在 table.render() 调用之前，且不能依赖任何异步延迟——哪怕只是 localStorage 读取，也得用 localStorage.getItem() 同步获取，而不是 await new Promise(...) 包一层。一旦表格初始化完成，toolbar 就锁死了，再改 window.USER_ROLE 也没用。
