項目需求：需要用戶在輸入框中輸入公司 全名? ? 但是為了避免用戶輸入不全? ?需要做一個帶輸入建議的輸入框
element組件：
<el-autocomplete? ? ? ?
????????class="inline-input"? ? ? ? ??
????????v-model="state1"? ? ? ? ?
????????placeholder="請輸入內容"? ? ?
????????:fetch-suggestions="querySearch"? ? ? ?
????????????????// fetch-suggestions?是一個返回輸入建議的方法屬性? ? ? ? ?:trigger-on-focus="false"? ? ? ? ? ? ? ?
?????????????????//? false = >輸入后匹配輸入建議? true =>?激活即列出輸入建議????????@select="handleSelect"? ? ? ? ? ? ? ?
????????????????? //?點擊選中建議項時觸發(fā)? handleSelect>? ?
</el-autocomplete>
在輸入框變化時 會觸發(fā)??querySearch 函數? ? 獲取到當前輸入的字段? 然后調用 createFilter 函數 篩選數據
下圖為官方寫法??
官方寫法將 全部數據 放在 loadAll 函數里? ?然后通過?createFilter 函數做篩選
而我需要從后臺獲取數據大州。
querySearch(queryString, cb) {? ?
????????this.$http({
????????????url: this.$http.adornUrl("/sys/selct/companyname"),
????????????method: "post",
????????????params: this.$http.adornParams({
????????????????????companyName:queryString?
? ? ? ? ? ? ?})
? ? ? ? }).then(({ data }) => {
????????????????for(var i=0;i<data.data.length;i++){
????????????????????????data.data[i].value = data.data[i].companyName;? ?
????????????????}
????????????????cb(data.data);
? ? ? });
}
?我需要篩選的數據字段名并不是value,所以現在需要遍歷數組把篩選字段換成value
最后將數據 cb() 回去??返回到 autocomplete 組件中?
