el-select實現輸入回車查詢

首先要了解input的幾種事件的區別
@input、@keyup.enter、@change、@blur
點擊查看
然後要了解@keyup.enter和@keyup.enter.native的區別
在這裏插入圖片描述
實現:

  <el-select
                  @keyup.enter.native="selectBlur"
                  @blur="selectBlur"
                  @change="getTableData"
                  placeholder="名稱"
                  v-model="sname"
                >
                  <el-option
                  ></el-option>
</el-select>
 // 設置課程名稱select選擇器可輸入
    selectBlur(e) {
      this.sname = e.target.value;
      this.getTableData();
    },

@keyup.enter.native=“selectBlur” //實現回車搜索
@blur=“selectBlur” //實現輸入框失去焦點時搜索
@change=“getTableData” //實現選擇某一個option時搜索

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章