一般搜索都是调后端的接口,绑searchValue字段(也有可能叫其他的字段名),通过后端的接口进行实时搜索
如果由前端自己实现搜索过滤的话也简单
1、input事件
2、绑数据源的时候,根据条件判断用过滤数组还是原数组
3、data中定义数据
data() { return { datalist: [],//原数组 filterList:[],//过滤数组 }}
4、先获取原数组的数据
async getdata() { { try { const res = await getlistdata() this.datalist = res.data.list this.total = Number(res.data.totalRow) } catch (error) { } } },
5、输入框input事件
//关键字搜索 keywordChange(keywords) { this.filterList = this.seachArray(this.datalist, keywords) this.total = this.filterList.length }, seachArray(arr, keyword) { const newArr = arr.filter(item => { //toUpperCase()将输入内容与对应的字段都转换为大写,这样可以实现不区分大小写,都能搜索到 return item.code.toUpperCase().includes(keyword.toUpperCase()) || item.name.toUpperCase().includes(keyword.toUpperCase()) }) return newArr },