欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element帶輸入建議el-autocomplete的使用

 更新時間:2022年03月08日 09:37:48   作者:web小奶精  
本文主要介紹了element帶輸入建議el-autocomplete的使用,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

vue+element UI

element UI的帶輸入建議官方文檔:https://element.eleme.cn/#/zh-CN/component/input

建議先看官方文檔,這里是官方文檔的適當(dāng)補(bǔ)充

 引用el-autocomplete

1、在需要的地方引用

<el-autocomplete
? ? ? class="inline-input"
? ? ? v-model="inputValue"
? ? ? :fetch-suggestions="querySearch"
? ? ? placeholder="請輸入內(nèi)容"
? ? ? @select="handleSubmit"
? ? ></el-autocomplete>

 v-model="inputValue" :與inputValue綁定值,也就是說,自動輸入建議的值可以通過inputValue拿到。

:fetch-suggestions="querySearch" : 返回輸入建議的方法,也就是說輸入框一獲取焦點(diǎn)。就會自動調(diào)用該方法拿到數(shù)據(jù),這些數(shù)據(jù)就是輸入建議的數(shù)據(jù)。

@select="handleSelect" : 當(dāng)選中建議項時,調(diào)用該方法。

2 、

<script>
export default {
? name: "searchBar",
? //allInfos是父組件傳來的值,如果allInfos不是父組件傳來的就不用這樣寫
? props: ["allInfos"],
? data() {
? ? return {
? ? ? inputValue: "",
? ? };
? },
?
? methods: {
? ? handleSubmit() {
? ? ?//根據(jù)自身情況
? ? ?//該方法是提交時觸發(fā)
? ? },
? ? //輸入框獲取焦點(diǎn)時調(diào)用的方法
? ? querySearch(queryString, cb) {
? ? //allInfos是怎么來,是從父組件傳過來的還是在自己組件調(diào)用api接口拿到的還是其他
? ? //我這里的allInfos是從父組件傳過來的,在這里也舉例子組件從父組件傳值
? ? ? let results = this.allInfos;
? ? ? results = queryString
? ? ? ? ? results.filter(this.createFilter(queryString))
? ? ? ? : results;
? ? //cb是回調(diào)函數(shù),返回篩選出的結(jié)果數(shù)據(jù)到輸入框下面的輸入列表
? ? ? cb(results);
? ? },
? ? //該方法仿寫官方文檔,如果沒有特別的需求,該方法改動不大
? ? //這是當(dāng)輸入數(shù)據(jù)時觸發(fā)的,篩選出和輸入數(shù)據(jù)匹配的建議輸入。
? ? //我這里用的是調(diào)用match方法,是模糊匹配;官方調(diào)用的是indexOf,是精確匹配,看自身情況選擇
? ? createFilter(queryString) {
? ? ? return (item) => {
? ? ? ? return item.value.toUpperCase().match(queryString.toUpperCase());
? ? ? };
? ? },
? },
};
</script>

觸發(fā)帶輸入建議的兩種方式

1.輸入框獲取焦點(diǎn)時就觸發(fā)
這是默認(rèn)的

2.輸入值后匹配觸發(fā)
在組件上加上:trigger-on-focus="false"

<el-autocomplete
? ? ? class="inline-input"
? ? ? v-model="inputValue"
? ? ? :fetch-suggestions="querySearch"
? ? ? :trigger-on-focus="false"
? ? ? placeholder="請輸入內(nèi)容"
? ? ? @select="handleSubmit"
? ? ></el-autocomplete>

轉(zhuǎn)成輸入建議回調(diào)的數(shù)據(jù)結(jié)構(gòu)

大家也看到了文檔里面,回調(diào)的數(shù)據(jù)結(jié)果,是一個數(shù)組,數(shù)組的每一項是一個對象,對象里一定要有一個value的屬性,這些是必須的。如果數(shù)據(jù)結(jié)構(gòu)不長這樣,那么待輸入建議的數(shù)據(jù)是無法渲染出來的。

[
? ? ? ? ? { "value": "xxx(在輸入建議看到的值,必需)", "address": "看自身情況" },
]

那么問題來了,如果拿出來的數(shù)據(jù)不是這樣結(jié)構(gòu),該怎么辦?以我的情況舉個例子。

我拿到的數(shù)據(jù)是這樣的,雖然也是數(shù)組,但是數(shù)組里的對象屬性不一樣。

this.modelInfos=
[
? ? ? ? ? { "modelId": "1", "modelName": "a1",type:"c" },
? ? ? ? ? { "modelId": "2", "modelName": "a2",type:"c" },
? ? ? ? ? { "modelId": "3", "modelName": "a3",type:"c" },
? ? ? ? ? { "modelId": "4", "modelName": "a4",type:"c" },
]

用map返回想要的數(shù)據(jù)結(jié)構(gòu)。

?this.allInfos= this.modelInfos.map((terminal) => {
? ? ? ? return {
? ? ? ? ? value: modelName,
? ? ? ? ? name: modelId,
? ? ? ? };
? ? ? });

可以log打印一下,就會發(fā)現(xiàn)allInfos的結(jié)構(gòu)就變成了想要的亞子。

增加回車觸發(fā)事件

在組件里增加 @keyup.enter.native方法

<el-autocomplete
? ? ? class="inline-input"
? ? ? v-model="inputValue"
? ? ? :fetch-suggestions="querySearch"
? ? ? :trigger-on-focus="false"
? ? ? placeholder="請輸入內(nèi)容"
? ? ? @select="handleSubmit"
? ? ? @keyup.enter.native="handleSubmit"
? ? ></el-autocomplete>

解決回車后建議輸入框沒消失的bug

如果增加了回車事件,那么輸入數(shù)據(jù)回車后,輸入建議框沒有自動消失,該如何解決?

在組件又增加方法:@input(在輸入值發(fā)生改變的時候觸發(fā)changeStyle方法)

@keyup(按鍵松開觸發(fā)的事件,也就是回車時觸發(fā)changeStyle方法)

傳入的“block”是讓輸入框建議展開,'.el-autocomplete-suggestion'是輸入建議框的類名

<el-autocomplete
? ? ? class="inline-input"
? ? ? v-model="inputValue"
? ? ? :fetch-suggestions="querySearch"
? ? ? :trigger-on-focus="false"
? ? ? placeholder="請輸入內(nèi)容"
? ? ? @select="handleSubmit"
? ? ? @keyup.enter.native="handleSubmit"
? ? ? @input="changeStyle('block', '.el-autocomplete-suggestion')"
? ? ? @keyup="changeStyle('block', '.el-autocomplete-suggestion')"
? ? ></el-autocomplete>
? ? //根據(jù)傳進(jìn)來的狀態(tài)改變建議輸入框的狀態(tài)(展開|隱藏)
? ? changeStyle(status, className) {
? ? ? let dom = document.querySelectorAll(className);
? ? ? dom[0].style.display = status;
? ? },

在handleSubmit的時候調(diào)用changeStyle方法,傳入的狀態(tài)為none(表示讓輸入建議框隱藏) 

handleSubmit() {
? ? ? this.changeStyle("none", ".el-autocomplete-suggestion"); ? ?
? ? },

到此這篇關(guān)于element帶輸入建議el-autocomplete的使用的文章就介紹到這了,更多相關(guān)element el-autocomplete內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論