templet里直接写标签无效是因为Layui表格将HTML当纯字符串插入，form.render('select')未执行导致原生select未初始化，且option不支持HTML内容（如图标会被忽略）；正确做法是templet仅渲染可点击容器，真实select动态挂载body并定位，再调form.render('select')激活。
templet里直接写
因为Layui表格渲染时，templet返回的HTML会被当作纯字符串插入单元格，此时form.render('select')尚未执行，原生select没被初始化，点击无响应；更关键的是，option标签不支持HTML内容（比如<i class="layui-icon"></i>会被浏览器忽略），所以图标、富文本等全失效。
正确做法：用容器模拟 + 动态挂载真实select
核心思路是「视觉分离」：templet只渲染一个可点击的展示容器（如<div data-value="{{d.status}}">），真实<code>select元素动态创建并插入document.body，再用form.render('select')激活。
- 容器必须带唯一标识，如
data-id="{{d.id}}"、data-field="status"，方便后续定位行和列 - 图标用
<i class="layui-icon"></i>或内联SVG，避免background-image导致弹层错位 - 文字取值加空值判断：
{{# if(d.status !== undefined){ }}{{d.status === 1 ? '启用' : '禁用'}}{{# }else{ }}-{{# }} - 点击容器后，用
getBoundingClientRect()计算其位置，把select绝对定位过去，防止被overflow: hidden截断
change事件后如何同步表格数据
仅更新select本身不够，表格视图必须同步。关键动作有三步：
- 在
form.on('select(yourFilter)', ...)回调里拿到data.value - 根据容器上的
data-id查到对应行数据，修改table.cache中该行的字段值 - 调用
table.updateRow(id, newData)刷新视图，否则滚动或排序后状态丢失
移动端focus失效怎么办
selectEl.focus()在部分Android WebView或iOS Safari中不触发下拉，不能依赖click模拟聚焦。稳妥做法是：
立即学习“前端免费学习笔记（深入）”；
- 插入
select后立即调用selectEl.focus()，但加setTimeout(..., 0)确保DOM已就绪 - 若仍无效，改用
layer.open弹出浮层式选择器，用dropdown.render()配合content函数动态生成菜单项 - 所有交互绑定必须用
event.stopPropagation()，否则会干扰表格行选中或工具栏事件
真实场景中，最易被忽略的是表格滚动时select定位偏移——它挂在body下，但坐标计算只做了一次。需要监听table.on('scroll', ...)或重写done回调里的定位逻辑，否则用户一滚屏，下拉框就悬空了。
