Vue -- input輸入框支持可遠程搜索

一、功能展示：

二、代碼：

1、template中

        <template>
                 <el-form-item label="公司名稱：" prop="keyword" label-width="120px">
                     <el-autocomplete
                        v-model="keyword"
                        :fetch-suggestions="querySearchAsync"
                        @select="handleSelect"
                        placeholder="請輸入關鍵字檢索"
                        clearable
                      ></el-autocomplete>
                </el-form-item>
     </template>

2、在script中

         data() {
              return {
                 keyword:''   //input框輸入的關鍵字
             }
        },
  


        methods:{
            //queryString 為在框中輸入的值
            //cb回調函數,將處理好的數據推回
             querySearchAsync(queryString, cb) {
                   //調用遠程接口 將返回數據封裝成 [{value:xxx,key2:value2},{value:xxx,key2:value2}]這樣的形式，其中value關鍵字是必須的，檢索框要根據該字段顯示，其余的根據需求而定
              },

          //@select="handleSelect"  是選中某一列觸發的事件,在這里item為選中字段所在的對象
          handleSelect(item) {
               console.log(item);
          },
     }

嗯，好了，就到這里了，記錄工作小點滴，讓無知有處可尋……