Layui table表头下拉筛选需用toolbar:true+templet自定义th模板注入select，手动render并委托document监听change事件触发reload，注意样式冲突与iOS溢出问题。
layui table 表头加下拉筛选菜单，本质是自定义表头模板
不是靠内置配置项一键开启，而是用 templet 覆盖表头单元格（thead th），把下拉控件（如 select 或 layui.form().render() 后的下拉）塞进去。layui 的 cols 配置里没有 filter: true 这种东西，别在文档里白找。
必须用 toolbar + templet 组合实现，不能只改 title
直接写 title: '<select>...'</select> 会失效——Layui 初始化时会对 title 做 HTML 转义。正确路径是：在列定义中启用 toolbar: true，再用 templet 返回完整 th 内容（含下拉 + 原标题文字）。
-
toolbar: true是前提，否则templet不作用于表头 -
templet函数接收参数{col, index}，返回字符串，例如：return '<div class="layui-table-cell"> <span>' + col.title + '</span><select class="filter-select" data-field="' + col.field + '"><option value="">全部</option></select> </div>'; - 渲染后需手动初始化下拉：
layui.form().render('select', 'layui-table-header');
筛选事件绑定要绕开表头重绘，用事件委托
表格排序、分页、重载时，表头会被 Layui 重新生成，直接给 .filter-select 绑 change 会失效。必须用 document 或 layui.table 容器做事件委托。
- 推荐写法：
$(document).on('change', '.filter-select', function() { ... }); - 注意取值：
$(this).val()是筛选值，$(this).data('field')对应列字段名，用来构造查询条件 - 触发表格重载：
table.reload('yourTableId', { where: { status: val } });，别用table.cache手动过滤，那不走服务端且不更新分页
移动端适配和样式冲突是高频翻车点
Layui 默认表头高度固定（40px），塞进 select 后容易撑高或截断；另外 form.render() 加的边框/圆角和表格主题色可能打架。
- 加 CSS 强制约束：
.layui-table-header .filter-select { height: 28px; padding: 0 10px; margin-left: 8px; } - 避免和 Layui 主题冲突：不要用
layui-form-pane类，用原生select+form.render('select')即可 - 真机测试时重点看 iOS Safari：下拉弹层可能被表格容器
overflow: hidden切掉，临时方案是给.layui-table-box加overflow: visible（但会影响横向滚动，慎用）
表头下拉筛选看着简单，实际卡在三处：模板注入时机、事件生命周期、样式隔离。哪一环没对齐，就只能看到空白 select 或点不动。
