最可靠做法是在 table 容器外手动插入独立标签区域，每次搜索或重置时调用 renderFilterTags() 同步 where 数据并过滤空值，初始化和清空筛选时也需显式调用。
如何用 Layui 在 table 上方动态渲染筛选条件标签
直接在 table.render() 的容器外手动插入标签区域最可靠，layui 表格本身不提供内置的“筛选条件展示区”，硬塞进表头或依赖 cols 配置会破坏结构且难维护。
为什么不能用 toolbar 或 title 属性实现
Layui 的 toolbar 是操作栏（如按钮），title 仅控制表格标题文字，二者都不支持动态绑定数据、也不响应 where 参数变化。常见错误是试图把筛选条件拼进 title 字符串里——一旦用户重置筛选，它不会自动更新，变成脏状态。
推荐做法：独立 DOM + 手动同步 where 数据
在表格容器上方加一个空 <div id="filter-tags"></div>，每次触发搜索（比如点击查询按钮、改变下拉框）后，调用函数解析当前 where 对象并生成标签：
function renderFilterTags(where) {
const $container = $('#filter-tags');
$container.empty();
if (!where || Object.keys(where).length === 0) return;
Object.entries(where).forEach(([key, val]) => {
if (val == null || val === '' || val === undefined) return;
const text = `${key}：${val}`;
$container.append(`<span class="layui-badge">${text}</span> `);
});
}
// 调用示例（配合 form.on('submit(...)') 或自定义按钮）
form.on('submit(search)', function(data) {
table.reload('demo', {
where: data.field,
page: { curr: 1 }
});
renderFilterTags(data.field); // 关键：主动同步
});
- 注意过滤掉空值（
''、null、undefined），否则会显示 “status：” 这类无效标签 - 如果筛选项有中文含义（如
status: 1对应 “启用”），需提前映射好，不要直接展示字段值 - 记得在页面初始化时也调一次
renderFilterTags()，处理默认筛选参数
清空筛选时如何同步移除标签
点击“重置”按钮后，除了调用 table.reload() 并传入空 where: {}，必须显式调用 renderFilterTags({})。只靠 reload 不会触发标签更新——因为 renderFilterTags 是纯前端逻辑，和表格实例无绑定关系。
容易被忽略的是分页切换、排序等操作也会携带旧 where，但它们不重新触发搜索逻辑，所以标签不会变；若需保持一致，应在 done 回调里检查 curr == 1 且参数未变时跳过，避免误刷。
