フロントエンドは入力ボックスのリアルタイム検索を実現 [vue+el-input]

一般的な検索では、バックエンド インターフェイスを調整し、searchValue フィールド (または他のフィールド名) をバインドし、バックエンド インターフェイスを介してリアルタイム検索を実行します。

検索フィルターがフロントエンド自体で実装されている場合も簡単です

1. 入力イベント

 <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() {
    
    
    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. インプットボックス入力イベント

    //关键字搜索
    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
    },