必须在layui.use(['form'], function(){})中调用form.render(),否则因模块未加载导致“cannot read property 'render' of undefined”;传参时null必须显式写出,如form.render(null, 'filter'),且动态插入select后须立即调用form.render('select')。

form.render() 必须在 layui.use 里调用
直接写 layui.form.render() 会报 Cannot read property 'render' of undefined——因为 form 模块还没加载,layui.form 是 undefined。
常见错误包括:把 form.render() 写在 layui.use('layer') 里却没把 form 加进依赖数组;或放在 layui.use 外部,当成全局方法用。
- 必须显式声明依赖:
layui.use(['form'], function(){ var form = layui.form; form.render(); }) - 如果只操作 select,优先用
form.render('select'),避免重绘整个表单影响性能 - Layui 2.8+ 已禁用
layui.form.render()这种写法,必须通过模块实例调用
传参不写 null 就会失效
form.render() 的第二个参数是容器 filter(比如 lay-filter="demo"),但第一个参数若为 null,**必须显式写出**,不能省略或传空字符串、undefined。
例如想只渲染 class="layui-form" 且 lay-filter="userForm" 的区域:form.render(null, 'userForm')。写成 form.render('userForm') 或 form.render('', 'userForm') 都不会生效。
-
form.render('select'):只刷新所有 select(含多选、搜索等) -
form.render(null, 'userForm'):只刷新lay-filter="userForm"容器内的组件 -
form.render('checkbox', 'userForm'):只刷新该容器内的 checkbox - filter 值大小写敏感,HTML 中写的是
lay-filter="UserForm",JS 里就得传'UserForm'
动态插入的 select 必须 render 后才能交互
从接口拉数据后拼到 <select></select> 里,选项有了但下拉箭头不显示、点击无反应——这不是数据问题,是没触发 Layui 的 DOM 重绘。
典型场景:添加图书页面请求分类 API,拿到数据后 $('select#categoryId').html(htmlStr),此时必须立刻调用 form.render('select')。
- 顺序不能错:先插入 HTML,再
form.render('select'),否则新选项不被识别 - 如果 select 在弹层(layer.open)里,要等 layer 完全 show 后再 render,否则容器尺寸计算错误导致下拉错位
- 表格单元格内用 templet 渲染的 select,也要在
table.on('rendered')回调里补 render,否则首次点击不响应
联动下拉时 render 调太早或太晚都白搭
二级 select 依赖一级 select 的 change 事件填充数据,结果选完一级,二级还是空——大概率是 form.render('select') 被调在了数据插入前,或者插完没 render。
正确节奏是:一级 change → 请求二级数据 → 插入二级 select 的 <option></option> → 立即 form.render('select')。
- 别在 AJAX success 回调外提前 render,数据还没回来就 render,等于白干
- 别用
setTimeout延迟 render,靠“猜时机”不可靠,尤其网络慢时 - 如果二级 select 本身是动态创建的(比如用 JS new Option() 插入),render 前要确保它已挂到 DOM 上
最稳的方式是把 render 放在数据插入语句之后紧跟着执行,不加任何条件判断或延时。











