直接在里写没样式、点不开，因表格单元格overflow:hidden截断弹出层，且ui框架需显式初始化；应避免templet硬塞，改用编辑态触发或动态生成并设selected属性。
直接在 <td> 里写 <code><select></select> 为什么没样式、点不开？
因为原生 <select></select> 渲染后只是个浏览器默认控件，没有框架样式和交互逻辑；如果用了 Layui、Bootstrap 等 UI 框架，必须显式初始化表单组件，否则它就“躺在那儿不动”。
常见错误现象：
- 下拉箭头不显示，点击无反应
- 选项文字挤在一起、高度异常、被表格行高裁剪
- 滚动表格时下拉框消失或错位
根本原因：表格单元格（<td>）通常设置了 <code>overflow: hidden，而 <select></select> 的弹出层是相对 定位的，会被父级截断。
解决思路：
- 加 CSS 强制释放溢出：
.layui-table-cell { overflow: visible !important; } - 避免用
height或max-height压缩单元格内容高度 - 不要把
<select></select>套在<div> 或其他非标准容器里——<code><select></select>只能直接包含<option></option>或<optgroup></optgroup>Layui 表格中
<select></select>不生效？别在templet里硬塞很多人在列配置里写：
templet: '<select lay-filter="status"><option value="1">启用</option></select>'，结果发现下拉框没样式、不能选、翻页后失效。这是因为：
-
table.render()渲染完单元格后，DOM 是静态 HTML，lay-filter不会被自动识别 -
form.render('select')只对当前已存在的<select></select>生效，但表格滚动/翻页会销毁重建 DOM，导致反复丢失 - 首次
done回调里调一次form.render()不够，后续动态插入的单元格不会被处理
正确做法是放弃在
templet里写<select></select>，改用编辑态触发：
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 列配置设
edit: 'text'，配合templet显示文本值（如d.status_name || '-'） - 监听
table.on('edit(filter)', callback)，在回调里用layui.dropdown拉起轻量下拉菜单 - 或者用
layer.open({type: 1})弹窗 +<select></select>，选完后手动更新缓存数据并刷新单元格
Bootstrap-Table 或原生 HTML 表格里怎么动态设默认选中项？
直接写死
<option selected></option>只适用于静态数据；真实场景中，每行的下拉默认值来自后端返回字段（比如user.role），必须 JS 动态设置。关键步骤：
- 先创建
<select></select>元素，再遍历选项数据生成<option></option> - 生成每个
<option></option>时，对比其value和当前行数据的对应字段值（如d.role） - 匹配时加
selected属性：opt.selected = true或opt.setAttribute('selected', '') - 最后插入到
<td> 中，**不要**等整个表格渲染完再统一 <code>form.render()—— 原生不用 render，Bootstrap 需调$('select').selectpicker('refresh')示例片段（原生）：
const select = document.createElement('select'); data.roles.forEach(role => { const opt = document.createElement('option'); opt.value = role.id; opt.textContent = role.name; if (role.id === d.role) opt.selected = true; select.appendChild(opt); }); td.appendChild(select);多级联动下拉（比如省→市→区）能不能塞进同一个
<td>？ <p>不能把三个 <code><select></select>全堆在一个<td> 里靠 CSS 排列，那样语义混乱、可访问性差、移动端体验崩坏。 <p>真正可行的方式只有两种：</p> <ul> <li>拆成三列：<code><th>省份</th> <th>城市</th> <th>区县</th>，每列一个<select></select>，用 JS 绑定change事件联动 - 单列放一个主下拉（如“选择地区”），点击后弹出含三级结构的自定义弹层（用
layer.open或dropdown实现），选完回填到该单元格文本
最容易被忽略的一点：
<optgroup></optgroup>不是二级菜单，它只是视觉分组，无法响应点击，也不能嵌套。想实现“点击省展开市列表”，必须用 JS 动态替换<select></select>的<option></option>，而不是靠 HTML 结构。 -
