Layui如何实现在表格中展示星级评分组件-Layui教程-PHP中文网

直接在Layui表格中使用lay-rate不生效，是因为表格渲染时仅处理HTML字符串而不初始化组件；必须通过templet返回带layui-rate类的容器，并在done回调或cellEvent中手动调用layui.rate.render()初始化。

为什么直接在 Layui 表格里用 `lay-rate` 不生效？

因为 layui.table 渲染时会把单元格内容当作纯文本或 html 字符串处理，而 lay-rate 是一个需要 dom 初始化的组件，表格默认不执行其渲染逻辑。你写 <div class="layui-rate" lay-value="4"></div> 在 templet 里，页面只会显示空 div，没星星。

必须用 `templet` + `layui.rate.render()` 手动初始化

表格列定义中不能依赖自动渲染，得在 templet 返回 HTML 后，用 done 回调或 cellEvent 触发时机手动调用 layui.rate.render()。常见写法：

templet 返回带 class="layui-rate" 和 lay-value 的容器，例如：<div class="layui-rate" lay-value="{{d.score}}" data-id="{{d.id}}"></div>
在 table.render() 的 done 回调里，用 layui.rate.render() 批量初始化（注意：要等表格 DOM 完全插入）
或者更稳妥的做法：在 cellEvent 中监听某列点击再初始化（适合懒加载或交互触发场景）

示例片段：

table.render({
  elem: '#demo',
  url: '/api/list',
  cols: [[
    {field: 'title', title: '标题'},
    {field: 'score', title: '评分', templet: '<div class="layui-rate" lay-value="{{d.score}}"></div>'}
  ]],
  done: function(res, curr, count){
    // 等表格渲染完，再初始化所有 rate 组件
    layui.rate.render({
      elem: '.layui-rate',
      value: 0, // 这里会被 lay-value 覆盖，可省略
      readonly: true // 根据需求设为只读
    });
  }
});

动态评分（可编辑）要注意事件冲突和重复初始化

如果希望用户点击修改评分，不能只靠 readonly: false —— 表格重载、分页、排序都会导致 DOM 重建，rate 实例丢失，且多次调用 render() 会生成重复监听器，引发值错乱或触发多次回调。

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

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

下载

每次表格刷新后，必须先销毁旧实例：layui.rate.getRateElem('.layui-rate').each(function(){ layui.rate.remove(this); });
再重新 render()，并绑定自定义 change 回调，用 ajax 提交更新
lay-value 必须是数字类型，字符串（如 "4"）会导致初始值显示为 0
避免在 templet 中写内联 JS，Layui 会过滤 script 标签