elementUI實現關鍵字搜索( 只是搜索 )

有過迷茫的階段獨自走在回家的街上，當我發現路還離我很遠現在依然是像當初那么渴望

elementUI實現關鍵字搜索

運用的elementUI選擇器中的遠程搜索功能( 還沒有封裝，接下來會封裝，封裝一點點學，不着急 )

結構 + data：

<el-form-item label="登記門店：" prop="name" class="el_btn_from">
 <!-- 
　　multiple 是否為單選
　　filterable 是否可搜索
　　remote 是否為遠程搜索
　　clearable 是否可清空
　　reserve-keyword 多選且可搜索時是否在選中一個選項后保留當前的搜索關鍵詞
　　remote-method 遠程搜索方法觸發事件
　　loading 是否正在從遠程獲取數據
-->
 {{ ruleForm.name }}
 <el-select
   v-model.trim="ruleForm.name"
   :multiple="false" filterable
   clearable
   remote
   reserve-keyword
   placeholder="請輸入關鍵詞"
   :remote-method="remoteMethod"
   :loading="loading"
   style="width:466px">
   <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
 </el-select>
</el-form-item>

ruleForm: {
  //v-model綁定
 name: [] },
guestVal: [],//接收后端數據
//選擇器綁定的
loading: false,
options: [],
list: []

 

js:

remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => { return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1; });
        }, 200);
      } else {
        this.options = [];
      }
    },
    searchKeyword() {//用於獲取數據的函數 開始請求數據然后直接調用
　　　　　const req = {
        id: null,
        gymnasiumCode: null,
        gymnasiumName: this.ruleForm.name,
        gymnasiumAddress: null,
        page: null,
        limit: null
      };
      guestRegistrationList(req).then(res => {
        this.guestVal = res.data.data.rows;
        this.list = this.guestVal.map(item => {
　　　　　　//把數據要搜索到的數據反出去 return { value: item.gymnasium.name, label: item.gymnasium.name }; });
      });
    }
  },
  created() {
    this.searchKeyword();
  }