Layui表格单元格可直接在templet中写多个按钮，需加lay-event和data-id属性、使用layui-btn-xs控制大小，并通过table.on('tool(...)监听事件；禁用内联onclick，用white-space:nowrap防换行。
layui table 单元格里怎么放多个按钮
直接在 templet 里写 html 就行，但得注意事件绑定方式和按钮样式冲突问题。layui 的表格单元格默认会把内容包裹进 .layui-table-cell，里面塞多个 button 是完全支持的，关键是怎么让它们不挤成一团、点击不失效、事件不重复绑定。
templet 模板里写按钮要加 class 和 data-id
别裸写 <button>编辑</button><button>删除</button>，Layui 不管你写啥，但它后续用 lay-event 绑事件时，靠的是 class 或自定义属性识别。推荐统一加 class="layui-btn layui-btn-xs" 控制大小，再用 data-id="{{d.id}}" 把行数据带进去：
templet: function(d){
return '<button class="layui-btn layui-btn-xs" lay-event="edit" data-id="' + d.id + '">编辑</button>' +
'<button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" data-id="' + d.id + '">删除</button>';
}
- 必须加
lay-event属性，不然table.on('tool(...)监听不到 -
data-id要手动拼，d是当前行数据对象，不能依赖this（模板函数里this不指向行） - 两个按钮都加
layui-btn-xs，否则默认大小会撑开单元格，影响对齐
tool 事件监听里怎么区分多个按钮
table.on('tool(test)', ...) 的回调里，通过 obj.event 拿到 lay-event 的值，再用 obj.tr.data('index') 或 obj.data 拿数据，别去 DOM 上反复查 data-id：
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'edit'){
layer.open({content: '编辑 ID：' + data.id});
} else if(obj.event === 'del'){
layer.confirm('确定删除？', function(index){
// 这里调接口删 data.id
layer.close(index);
});
}
});
-
obj.data是最稳的取值方式，比从 DOM 读data-id更可靠（避免渲染延迟或重复绑定导致取错） - 别在
templet里直接写onclick="xxx()"，破坏事件委托机制，后期重载表格时事件就丢了 - 如果按钮需要禁用状态（比如“审核中”不能操作），在
templet里判断d.status，加disabled和layui-btn-disabled类
按钮太多导致单元格高度溢出或换行
默认单元格高度固定，三个以上按钮容易折行或文字被截。解决办法不是调高 cellMinWidth，而是用 CSS 强制单行+省略：
.layui-table tbody .layui-table-cell {
white-space: nowrap;
}
.layui-table tbody .layui-table-cell button {
margin-right: 5px;
}
- 加
white-space: nowrap防止按钮换行，配合margin-right控制间距 - 如果真要放四个按钮（比如增删改查+导出），建议合并为下拉菜单，用
lay-dropdown，否则移动端根本点不准 - 注意
layui-btn-xs在低版本 Layui（2.5.x 之前）可能没定义，要自己补 CSS 或升级
