前端实现输入框实时搜索，【vue+el-input】

一般搜索都是调后端的接口，绑searchValue字段（也有可能叫其他的字段名），通过后端的接口进行实时搜索

如果由前端自己实现搜索过滤的话也简单

1、input事件

<el-input v-model="queryParams.searchValue" @input="keywordChange($event)" clearable style="width: 180px" />

• 1
• 2
• 3
• 4
• 5
• 6

2、绑数据源的时候，根据条件判断用过滤数组还是原数组

<el-table ref="elTable" class="mblclass" border :data="filterList.length?filterList:datalist" style="font-size: 14px" >

• 1
• 2
• 3
• 4
• 5
• 6
• 7

3、data中定义数据

data() { return { datalist: [],//原数组 filterList:[],//过滤数组 }}

• 1
• 2
• 3
• 4
• 5
• 6

4、先获取原数组的数据

async getdata() { { try { const res = await getlistdata() this.datalist = res.data.list this.total = Number(res.data.totalRow) } catch (error) { } } },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

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 },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13