右侧工具栏自定义图标需在defaultToolbar中声明{layEvent:'refresh',icon:'layui-icon-refresh'},并用table.on('toolbar(filter)',...)监听,配合obj.config.page.curr、where等参数实现保持状态的重载。

layui table右侧工具栏图标怎么加自定义项
直接在toolbar里写<i class="layui-icon"></i>不会显示——Layui把字符串当纯文本渲染,不解析 HTML。右侧工具栏(即默认的 filter/print/export 那一排)只认defaultToolbar数组里的合法值,要么是内置字符串(如'filter'),要么是带layEvent的对象。
-
defaultToolbar必须显式声明,哪怕为空数组[],不能省略 - 想加一个“刷新”图标,得写成
{ layEvent: 'refresh', icon: 'layui-icon-refresh' },icon值必须是 layui 内置图标类名(不是 Unicode 或自定义字体) -
layEvent值只能是合法 JS 标识符:小写字母、数字、下划线,不能含空格、短横线或中文(lay-event="refresh-now"会失效) - 图标类名拼错(比如
layui-icon-reload不存在)或字体文件 404,也会空白——打开 Network 面板过滤iconfont确认是否加载成功
为什么自定义图标点了没反应
右侧工具栏按钮点击无响应,90% 是table.on('toolbar(*)')监听没对上。它和左侧模板按钮共用同一套事件机制,但容易被忽略三点:
- 监听必须写成
table.on('toolbar(yourFilter)', ...),其中yourFilter是表格<table lay-filter="yourFilter">的值,不是 ID 或模板名 - 按钮的
layEvent值(如refresh)必须和回调中obj.event === 'refresh'完全一致,大小写敏感 - 全局设置
layui.table.set({ defaultToolbar: [...] })只是注册图标,不自动绑定行为——你仍需手动写table.on监听并实现逻辑
如何让右侧图标触发重载且保持当前页码和搜索条件
直接调table.reload('id')会丢失分页和筛选状态。正确做法是主动读取并传入当前配置:
- 在监听回调里用
obj.config.page.curr拿到当前页码 - 用
obj.config.where拿到上次请求携带的参数(如搜索关键词、时间范围) - 用
obj.config.initSort保留排序字段和顺序 - 组合调用:
table.reload('userTable', { page: { curr: obj.config.page.curr }, where: obj.config.where, initSort: obj.config.initSort })
右侧图标能访问选中行数据吗
不能。obj在toolbar回调里没有data字段,this指向按钮 DOM,不是表格实例。右侧工具栏是表格级操作,和具体行无关。
- 要导出选中行,得先调
table.checkStatus('userTable').data手动获取数组 - 如果操作目标明确是“某一行”(如编辑、删除单条),这个按钮就不该放右侧,而应放进列配置的
toolbar: '#rowBar'里——那里回调才有obj.data - 右侧图标适合全局动作:刷新整表、导出全部、切换视图模式等
最常被跳过的一步是检查layui.css里url("../font/iconfont.woff2")路径是否还有效——项目迁移后相对路径极易断掉,图标空白却查不出代码问题。


















