删除按钮该用 templet;它支持列内 html 和 lay-event 事件,适合单行操作,而 toolbar 适用于顶部批量操作。

删除按钮该用 templet 还是 toolbar?
用 templet。它能直接在列里写 HTML,配合 lay-event 触发事件,适合单行操作;toolbar 更适合顶部统一操作(如“批量删除”),不适合每行一个“删除”按钮。
常见错误是把按钮写成 onclick="delRow(...)",这会绕过 layui 的事件委托机制,导致点击无响应或重复绑定。
正确写法示例:
{field: 'id', title: '操作', align: 'center', templet: function(d) {
return '<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>';
}}
监听器怎么写才触发得了?
table.on('tool(你的lay-filter值)') 必须在 table.render() 之后注册,且 filter 值要和表格的 lay-filter 属性完全一致(大小写、空格都不能错)。
容易漏掉的点:
- 监听器写在
table.render()前面 → 事件根本没挂上 - filter 写成
'userTable',但实际表格是lay-filter="usertable"→ 匹配失败 - 用了
on('click', ...)替代table.on→ 不走 layui 行事件委托,obj没有data、tr等关键属性
标准监听结构:
table.on('tool(userTable)', function(obj){
if(obj.event === 'del') {
layer.confirm('确认删除?', function(index){
// 后续逻辑
layer.close(index);
});
}
});
点击确认后,怎么安全删掉这一行?
别手动 $(obj.tr).remove(),也别只改数据源不更新视图——必须用 obj.del()。
obj.del() 会同时做三件事:从 DOM 删除 <tr>、从内部缓存 <code>layui.table.cache[xxx] 移除对应项、保持分页/排序状态不变。这是唯一推荐的删除方式。
但注意:如果表格启用了 url 加载(即后端分页),obj.del() 只删前端视图,后端数据还在。你得补上 AJAX 请求,并在成功后再调 obj.del():
if(obj.event === 'del') {
layer.confirm('确认删除?', function(index){
$.post('/api/delete', {id: obj.data.id}, function(res){
if(res.code === 0) {
obj.del(); // ✅ 成功后再删
} else {
layer.msg('删除失败');
}
});
});
}
为什么删完刷新页面还看到那行?
因为 layui 表格默认会缓存原始数据(layui.table.cache[filter]),而 obj.del() 并不会自动清理这个缓存 —— 这是 2.6.x 到 2.8+ 版本的一个隐蔽差异。
如果你用的是 2.7.x 或更早版本,或者表格初始化时传了 data: [...](前端静态数据),就必须手动同步缓存:
- 先通过
obj.tr.attr('data-index')拿到当前行在缓存里的索引 - 再从
layui.table.cache[filter]中splice掉那一项
示例:
const cache = layui.table.cache['userTable'];
const index = obj.tr.attr('data-index');
if (cache && index !== undefined) {
cache.splice(index, 1);
}
这个步骤在纯前端增删改场景下不能省;但在后端分页(url 配置)模式下可跳过——因为下次 reload 会全量拉新数据。











