应使用包裹图标,配合lay-event属性和table.on('tool(filter)')监听,禁用状态需templet动态返回,多图标改用layer.tips下拉菜单。
templet里怎么写多个迷你图标按钮才不撑行高
直接写 <i class="layui-icon"></i> 会撑开整行,因为图标没容器约束,默认继承父级 line-height。必须用 layui-btn layui-btn-xs 包裹,否则高度失控。
-
layui-btn-xs是关键,它把按钮压到 20px 高、内边距缩到最小,但必须和layui-btn一起用,单独加layui-btn-xs不生效 - 推荐写法:
<button type="button" class="layui-btn layui-btn-xs layui-btn-primary"><i class="layui-icon"></i></button> - Unicode 图标要用实体字符(如
),别直接粘贴图标或用十六进制ሴ,Layui 模板对后者支持不稳定 - 多个按钮并排时,每个后面加
layui-mr5或内联style="margin-right: 5px;",避免点击区域重叠
按钮点击没反应?检查 lay-event 和事件监听是否匹配
图标按钮本身没事件能力,必须靠外层按钮触发,且只能通过 lay-event 被 table.on('tool(filter)') 捕获。写 onclick="xxx()" 看似能用,但表格重载后事件就丢了。
- templet 中按钮必须带
lay-event属性,比如<button lay-event="edit"><i class="layui-icon"></i></button> - 监听代码里 filter 名要和表格
lay-filter值完全一致,比如table.on('tool(userTable)', ...)对应<table lay-filter="userTable"> <li>别在 <code>tool回调里直接操作 DOM 或调table.reload()后立刻读obj.data,渲染可能还没完成 - 禁用状态要靠 templet 判断:
return d.status === 0 ? '<button lay-event="enable" class="layui-btn-disabled" disabled>启用</button>' : '<button lay-event="disable">禁用</button>'; - 正确做法是只留一个「更多」按钮:
<button lay-event="more"><i class="layui-icon"></i></button> - 在
tool监听中用layer.tips(html, this, { tips: [2, '#fff'], area: ['120px', 'auto'] })弹出菜单 - 弹出内容写成按钮组:
'<button class="layui-btn layui-btn-xs"><i class="layui-icon"></i>编辑</button><button class="layui-btn layui-btn-xs"><i class="layui-icon"></i>删除</button>' - 注意:弹窗关闭要手动控制,
layer.tips默认不自动关,可绑定 document click 关闭,但需排除当前按钮点击 - 安全写法:
title: '姓名<span data-field="name" style="cursor:pointer;margin-left:5px;"><i class="layui-icon"></i></span>' - 图标点击事件必须用事件委托:
$(document).on('click', 'th .layui-icon', function() { var field = $(this).closest('[data-field]').data('field'); }) - 避免重复绑定:表格重载前先
$(document).off('click', 'th .layui-icon'),或加命名空间如.colSetting - 别用
done回调里用$('th').append()动态加图标——分页或搜索后会丢失,且无法绑定事件
图标太多挤成一团?别硬塞,改用 layer.tips 下拉菜单
超过 3 个图标按钮并排,单元格必然换行或高度溢出。Layui 表格单元格默认 white-space: nowrap,强行加 display: block 会撑高整行,破坏对齐。
表头右侧加配置图标,title 写 HTML 要防转义失效
想在某一列标题末尾加⚙️图标,不能靠 toolbar,得改 title 字段为 HTML 字符串,但 Layui 会对 title 自动 escape,直接写 <i></i> 标签会被当文本渲染。
table.on('tool()'),而不是分散在 onclick 或 done 里——否则表格重绘一次,逻辑就断一次。











