The general search is to adjust the back-end interface, bind the searchValue field (or other field names), and perform real-time search through the back-end interface
It is also simple if the search filter is implemented by the front end itself
1. input event
<el-input
v-model="queryParams.searchValue"
@input="keywordChange($event)"
clearable
style="width: 180px"
/>
2. When binding the data source, judge whether to use the filter array or the original array according to the conditions
<el-table
ref="elTable"
class="mblclass"
border
:data="filterList.length?filterList:datalist"
style="font-size: 14px"
>
3. Define data in data
data() {
return {
datalist: [],//原数组
filterList:[],//过滤数组
}}
4. Get the data of the original array first
async getdata() {
{
try {
const res = await getlistdata()
this.datalist = res.data.list
this.total = Number(res.data.totalRow)
} catch (error) {
}
}
},
5. Input box input event
//关键字搜索
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
},