推荐方案：使用容器模拟 + 动态挂载真实的select

核心思路是「视觉与逻辑分离」：在templet中只渲染一个可点击的展示容器（比如

），而真实的select元素则通过JavaScript动态创建并插入到document.body中，最后调用form.render('select')完成激活。

• 容器必须携带唯一标识，例如data-id="{{d.id}}"、data-field="status"，方便后续精确定位到对应的行和列
• 图标建议使用或内联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回调中重写定位逻辑，否则用户一旦滚动屏幕，下拉框就会悬空错位。