vue实现的前端模糊匹配搜索

2023-11-07 21:58| 来源: 网络整理| 查看: 265

vue实现的前端模糊匹配搜索

可以借助js自带的filter方法和正则表达式来筛选我们需要的元素

首先构建html框架：

搜索名称价格备注 {{item.label}} ￥{{item.price}} {{item.desc}}

用户输入的内容动态绑定在变量searchText上，用户点击搜索触发submit方法，我们将searchText变量作为正则表达式的检测标准：

submit() { let text = this.searchText let reg = new RegExp(text) //声明正则变量 this.data = this.tableData.filter(item => reg.test(item.label)) //返回 }

这里使用了data变量用于存储搜索后的结果（以及绑定到表格上渲染），tableData存储表格的原始数据，目的是当用户输入空格时可以还原所有数据，this.tableData.filter(item => reg.test(item.label)) 是简写用法，完整为：

let func = function (item) { if (reg.test(item.label)) { //检测通过 return item } } this.data = this.tableData.filter(func)

filter函数迭代一个数组，然后根据传入的函数筛选合适的元素并且返回一个全新的数组

搜索空：

搜索“瓜“：

本文来自博客园，作者：Maji-May，转载请注明原文链接：https://www.cnblogs.com/caozhenfei/p/14882122.html

English Blog: http://flynncao.github.io/

【本文地址】

公司简介

联系我们