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