layui不提供模糊/精确匹配切换内置开关,需手动控制逻辑:select用filter函数动态判断,table通过where传mode给后端,tree需手写带mode分支的递归过滤,并统一trim()和tolowercase()处理空格与大小写。

layui 本身不提供“模糊/精确匹配切换”的内置开关,所有 select、table、tree 等组件的搜索行为都由你控制逻辑——切换本质是改判断条件,不是切配置项。
select 组件:用 filter 函数动态控制匹配方式
layui.select 的 lay-search 只负责渲染输入框,真正过滤靠的是内部 filter 函数。你可以在 form.render() 后手动重写它,根据当前模式(模糊/精确)返回不同结果:
- 精确匹配:用
===或node.title === keyword,注意 trim() 和大小写统一(如都转小写) - 模糊匹配:用
node.title.includes(keyword)或正则new RegExp(keyword, 'i').test(node.title) - 别直接修改 layui 源码;推荐在
form.on('select()')之外,用$('#yourSelect').next().find('dd')遍历 DOM 选项并显式show()/hide(),避免干扰 layui 内部状态 - 切换按钮只需更新一个全局变量(如
window.searchMode = 'exact'),再触发一次 filter 重执行即可
table 组件:在 where 参数里传 mode 字段给后端
前端 table 的 table.reload() 不做文本匹配,只传参。模糊/精确逻辑必须由后端承担,前端只需明确告诉它要哪种行为:
- 搜索时传
where: { keyword: val, mode: 'fuzzy' }或mode: 'exact' - 后端收到
mode: 'exact'就用=或==查询;'fuzzy'则用LIKE '%val%'或全文索引 - 不要在前端用
table.cache自己遍历过滤——分页状态下会漏数据,且无法处理 null/undefined 类型字段 - 如果坚持前端过滤(仅限小数据量),务必先
JSON.parse(JSON.stringify(table.cache[tableName]))深拷贝,再对每行字段调用String(value).includes(keyword)或String(value) === keyword
tree / treeTable:递归过滤时加 mode 分支判断
tree 和 treeTable 都没内置搜索,必须手写 filterTreeData(data, keyword, mode)。关键不是“怎么写递归”,而是 mode 如何影响节点保留逻辑:
-
mode === 'exact':只保留node.title === keyword的节点,且必须保留其完整父链(否则路径断裂) -
mode === 'fuzzy':用node.title.includes(keyword),同时递归检查子节点是否有匹配,有则标记父节点为“需保留” - 别用
node.title.toLowerCase().indexOf(keyword.toLowerCase()) >= 0做模糊——它和includes效果一致,但更啰嗦且易错 - treeTable.reload() 时,若启用了分页,必须显式带
page: { curr: 1 },否则可能显示空页
最常被忽略的一点:所有组件的“精确匹配”都默认不处理前后空格和大小写。用户输“ 北京 ”或“beijing”,你得在传给后端或执行 === 前,统一 .trim().toLowerCase(),否则切换毫无意义。











