点击标签触发搜索需手动绑定事件并调用table.reload()，确保id一致、where参数正确构造、页码重置为1，且根据业务需求实现单选互斥或多选叠加逻辑。
点击标签直接触发搜索，本质是把「标签」当作可点击的筛选条件入口，而非仅作展示。Layui 本身不提供原生标签搜索组件，必须手动绑定事件 + 调用 table.reload()，且关键在于 where 参数构造和页码重置。
标签点击后搜索没反应？先确认 table ID 和 reload 参数是否匹配
常见错误是 table.reload() 传入的表 ID 和 table.render() 中定义的 id 不一致，比如 render 时写的是 id: 'userTable'，reload 却写了 table.reload('userList', {...})。控制台会报 Cannot read property 'config' of undefined —— 这说明实例根本没找到。
- render 阶段定义的
id必须是字符串字面量，大小写敏感，不能带空格或特殊符号 - reload 第一个参数必须与之完全一致，建议统一用常量变量管理，比如
const TABLE_ID = 'userTable' - 别漏掉
where对象外层的大括号，table.reload(TABLE_ID, { where: { status: 'active' } })才合法
如何让标签点击时正确传参并重置页码
用户在第 3 页点“已审核”标签，结果还是查第 3 页的数据，自然为空。Layui 不会自动重置分页，必须显式设置 page: { curr: 1 }。
- 每个标签应携带完整筛选字段名和值，例如：
<span class="filter-tag" data-field="status" data-value="passed">已审核</span> - 点击事件里提取
data-field和data-value，组装where对象 -
where字段名必须和后端接口约定严格一致（如后端要state，你传status就收不到） - 每次 reload 都要带上
page: { curr: 1 }，否则页码滞留在上一次状态
多个标签共存时，如何支持「叠加筛选」或「单选互斥」
标签行为逻辑取决于业务：是「点 A 再点 B 表示 A AND B」，还是「点 B 自动取消 A」？Layui 不管这个，全靠你控制 where 对象的生成方式。
- 互斥模式（单选）：点击任一标签，清空其他标签的 active 状态，
where只保留当前字段 - 叠加模式（多选）：需维护一个全局对象（如
currentFilters = {}），点击标签时增删键值对，再整体传给where - 清除某一项：点击已激活标签，将其
data-value设为空或删掉对应 key，再 reload - 注意空值处理：不要把
status: ''这种传给后端，后端可能当字符串空值查，应直接剔除该字段
标签样式和交互细节容易被忽略
标签不是纯文本，它需要视觉反馈和语义化结构。直接用 <div> 包文字，既难选中又无键盘支持；用 <code><button></button> 更稳妥，但默认有边框和背景色，需 CSS 重置。
- 推荐用
<button type="button" class="layui-btn layui-btn-xs layui-btn-primary filter-tag">待处理</button>，保留可聚焦、可空格/回车触发的特性 - 加
tabindex="0"让非 button 元素也能键盘操作（如果非要用 span） - 点击后建议加 loading 状态，比如
button.disabled = true+layer.load(2)，避免重复点击 - 别在标签里嵌套
<a href="#"></a>，href="#" 会跳顶，且和 layui 的事件委托冲突
最易被忽略的一点：标签点击后，输入框里的内容不会自动清空，也不会影响其他搜索条件。如果你希望点标签即“切换全部筛选”，就得在事件里手动清空所有相关 input 值，并同步更新 where 对象 —— Layui 不会帮你做任何状态同步，全是显式控制。
