Layui表格怎么实现根据行数据的不同类别渲染不同的操作按钮-Layui教程-PHP中文网

templet函数必须动态返回html字符串，通过if/else判断d.category拼接按钮，避免静态模板、css隐藏或文本反推；lay-event回调中直接用obj.data.category获取原始值；字段比较前需归一化类型。

templet 函数必须写成动态返回 html 字符串的形式

静态字符串模板（比如 templet: '<button>编辑</button>'）无法做条件判断，所有行都会渲染一模一样的按钮。唯一可行路径是让 templet 是一个函数，接收当前行数据 d，内部用 if/else 或 switch 分支决定返回什么 html。

常见错误包括：

在字符串模板里写 {{ d.type }} 试图插值后加逻辑——laytpl 不支持表达式执行，只做简单替换
把所有按钮都写出来再靠 CSS display: none 控制显隐——DOM 节点冗余，事件监听器全挂载，状态难同步

正确做法是：函数体内直接判断 d.category，拼出最终要渲染的按钮 HTML 字符串，不操作 DOM，不调用 laytpl，不引入额外依赖。

示例：

{field: 'category', title: '操作', templet: function(d) {
  if (d.category === 'user') {
    return '<button class="layui-btn layui-btn-xs" lay-event="edit">编辑用户</button>';
  } else if (d.category === 'order') {
    return '<button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="cancel">取消订单</button>';
  } else {
    return '<button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="view">查看详情</button>';
  }
}}

lay-event 回调里必须用 `data` 参数取真实状态，不能解析按钮文本

按钮文字变了，但点击后业务逻辑仍需知道这行原始的 category 值。如果靠 $(e.elem).text() 反推，一旦按钮文案被翻译、被样式遮挡、或前端临时改了文字，整个逻辑就崩了。

正确方式是：监听 tool(tableId) 事件，在回调函数的 obj.data 中直接读取字段：

obj.data.category 就是该行原始数据中的值，和渲染时传给 templet 的 d.category 完全一致
不需要查 table.cache，也不需要 obj.tr 找父节点再查属性
只要没在 parseData 里篡改过字段，这个值就是可信的

注意：lay-event 绑定的是按钮，不是列；事件监听必须用 table.on('tool(yourTableId)', callback)，普通 click 监听拿不到 obj.data。

字段类型不一致时，比较前务必归一化

Layui 不做隐式转换，d.category === 'user' 和 d.category === 'USER' 是两回事，后端返回大小写混杂、空格、数字编码（如 1 表示 user）时，很容易漏判。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

建议统一处理策略：

在 parseData 回调中提前标准化：data.category = String(data.category).trim().toLowerCase()
或在 templet 函数里用宽松比较：String(d.category).toLowerCase() === 'user'
避免只写 d.category == 'user'，万一后端返回 'user '（带空格）就失效

同理，布尔型字段如 is_active，别直接写 d.is_active === true，优先用 !!d.is_active 或 Boolean(d.is_active) 转换。

toolbar 模板（script type="text/html"）里 if 判断写法要严格遵循 laytpl 语法

如果你选择用外部 <script type="text/html"></script> 定义 toolbar 模板（比如 toolbar: '#operateBar'），里面的条件语句必须用 laytpl 的双大括号语法，且括号内只能是简单表达式，不能写复杂 JS 逻辑。

正确写法：

<script type="text/html" id="operateBar">
  {{# if(d.category === 'user') { }}
    <button class="layui-btn layui-btn-xs">管理权限
  {{# } else if(d.category === 'product') { }}
    <button class="layui-btn layui-btn-xs layui-btn-normal">上架
  {{# } else { }}
    <button class="layui-btn layui-btn-xs layui-btn-warm">通用操作
  {{# } }}
</script>

容易踩的坑：