layui表格中无法直接使用select下拉框,因其未原生支持;需通过table.on('edit')监听+layui.dropdown.render()手动实现,注意绑定this、data字段规范及obj.update同步数据。

layui 表格里直接写 <select></select> 或设 edit: 'select' 都不生效——框架压根没实现这个能力,所有“下拉框”都是靠手动接管 DOM 生命周期模拟出来的。
为什么 templet 里写 select 标签没反应
表格渲染后单元格是静态 HTML,<select lay-filter="xxx"></select> 只是个原生标签,layui.form 不会自动初始化它;翻页、重载、滚动重建时,这个 <select></select> 就彻底丢失交互能力。
- 常见现象:点击无下拉箭头、选不了项、样式是浏览器默认的
- 错误写法:
templet: '<select><option value="1">启用</option></select>' - 根本原因:没调
form.render('select'),且没在正确时机(done 回调)调,更没处理重绘后的重新绑定
table.on('edit()') + layui.dropdown 是最稳路径
把列设为 edit: 'text',仅启用编辑入口,实际 UI 完全由你控制。监听 table.on('edit(filter)'),在点击瞬间用 layui.dropdown.render() 拉起菜单,绑定到 this(当前单元格 DOM),用 obj.update() 同步数据。
-
elem: this必须写,否则下拉框脱离定位 -
data数组必须含name和value字段,这是dropdown.render()的硬性约定 - 别在
click回调里调table.reload(),用obj.update({field: item.value})才能同步缓存与视图 - 禁用
form.render('select')全局调用,它会导致翻页后下拉变回原生、事件重复绑定、老版本直接报错
联动下拉不能靠表格列配置解决
比如「省份 → 城市」这种,表格重绘一次,所有手动绑定的 change 事件就丢了。真要联动,得把逻辑收口到弹窗里闭环处理,或者用 dropdown.render() 的 content 函数动态生成 HTML。
- 在
content: function(triggerElem)里取triggerElem.data('province'),再请求城市列表 - 每次请求前清空下级
<option></option>,加个<option value="">加载中</option> - 请求成功后,拼好 HTML 返回,
dropdown.render()会自动渲染浮层,不用再form.render() - 移动端注意:iOS Safari 点一下就收,加
style="touch-action: manipulation"抑制默认行为
真正难的不是写几行 dropdown.render,而是每次点击都要精准绑定当前行上下文、确保菜单不脱离定位、数据更新不丢 cache、翻页后状态不丢失——这些细节漏一个,用户就卡在“点了没反应”或“改完一翻页又变回去”上。











