技術標籤：elementUI小課堂vue

autocomplete 是一個可帶輸入建議的輸入框元件，fetch-suggestions 是一個返回輸入建議的方法屬性，如 querySearch(queryString, cb)，在該方法中你可以在你的輸入建議資料準備好時通過 cb(data) 返回到 autocomplete 元件中。

使用之前建議參考官方文件
input根據輸入內容提供對應的輸入建議https://element.eleme.cn/#/zh-CN/component/input

使用元件遇到的問題

• 輸入建議回撥的資料結構
• 增加回車觸發事件
• 規則校驗不生效

輸入建議回撥的資料結構

//官網使用列子
<el-autocomplete
 class="inline-input"
  v-model="state1"
  :fetch-suggestions="querySearch"
  placeholder="請輸入內容"
  @select="handleSelect"
></el-autocomplete>
<script>
  export default {
    data() {
      return {
        restaurants: [],
        state1: '',
      };
    },
    methods: {
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 呼叫 callback 返回建議列表的資料
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
        //
          { "value": "三全鮮食（北新涇店）", "address": "長寧區新漁路144號" },
          { "value": "Hot honey 首爾炸雞（仙霞路）", "address": "上海市長寧區淞虹路661號" },
          { "value": "新旺角茶餐廳", "address": "上海市普陀區真北路988號創邑金沙谷6號樓113" }
        ];
      },
      handleSelect(item) {
        console.log(item);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>
 

• 問題：獲取到後端返回的陣列，並將陣列傳入作為 results 傳入 callback 後，焦點放在 輸入框 上的時候，並未出現任何內容，只出現了一個不完整的空白框。
• 原因：預設繫結data:[] 中的 value 欄位。
• 解決辦法：（看了好多方法，其實這裡不需要很麻煩的轉換資料結構）官網提供了屬性value-key，賦值成你需要的欄位即可。
  

//我這裡需要的欄位名稱為companyName
<el-autocomplete
   class="inline-input"
   v-model="searchForm.searchCompany"
   :fetch-suggestions="querySearch"
   placeholder="請輸入企業關鍵字"
   @select="handleSelect"
   value-key="companyName"
   @keydown.native.enter="companyPolicyHandel"
 ></el-autocomplete>
 

增加回車觸發事件

• 問題：@keydown.enter事件觸發不了
• 原因：element-ui自身封裝了一層input標籤之後，把原來的事件隱藏了，加上.native可以監聽到元件根元素的原生事件
• 解決方法：使用@keydown.native.enter

規則校驗不生效

一開始觸發條件使用了blur,改成change就好了，具體原因正在考察中。

searchRule: {
 searchCompany: [
     {required: true, message: '企業不能為空', trigger: 'change'}
   ],
 },

其他問題遇到繼續補充。