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

阅读本书更多章节>>>>

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

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

1、input事件

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

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

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

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

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/fengyun/2024-04-20/160551.html，文章来源：网络cs，作者：往北，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！