vue中el-autocomplete與el-select的異同
前言
最近項(xiàng)目里面需要使用到下拉框的遠(yuǎn)程搜索，我這邊使用的是el-select，其實(shí)查看文檔我們可以得知，還可以使用el-autocomplete來實(shí)現(xiàn)遠(yuǎn)程搜索。
那么它們具體有何異同呢？今天我們來看看。
異同
el-autocomplete
el-autocomplete是使用fetch-suggestions方法實(shí)現(xiàn)，當(dāng)輸入的時(shí)候，會(huì)調(diào)用我們提供的方法，傳入的參數(shù)是輸入的value，以及callback。
我們要把請求到的下拉列表通過callback返回（列表的每一項(xiàng)以key為value的形式傳，也可以通過value-key換成其它key）。
代碼如下：
<el-autocomplete
v-model="value"
:fetch-suggestions="querySearchAsync"
placeholder="請輸入內(nèi)容"
></el-autocomplete>
export default {
data () {
return {
value: ''
}
},
methods: {
querySearchAsync (queryString, cb) {
setTimeout(() => {
cb([{value: '答案cp3'}])
}, 200)
}
}
可以看到el-autocomplete實(shí)時(shí)輸入的時(shí)候，value也是實(shí)時(shí)變化的，并且，你選中選項(xiàng)，再次拉起選項(xiàng)的時(shí)候，不會(huì)有選中的效果。
所以el-autocomplete可以理解為輸入建議的組件。
el-select
el-select的遠(yuǎn)程搜索是通過remote-method來實(shí)現(xiàn)。當(dāng)你輸入的時(shí)候，會(huì)調(diào)用remote-method對應(yīng)的方法來實(shí)現(xiàn)。參數(shù)是傳入當(dāng)前輸入的value值。
然后我們請求后，把el-select的option賦值就可以了。
代碼如下：
<el-select
v-model="value"
filterable
remote
reserve-keyword
placeholder="請輸入關(guān)鍵詞"
:remote-method="remoteMethod"
:loading="reqLoading"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
export default {
data () {
return {
value: '',
reqLoading: false,
options: []
}
},
methods: {
remoteMethod (query) {
if (query !== '') {
this.reqLoading = true
setTimeout(() => {
this.reqLoading = false
this.options = [{label: '答案cp3',value: '答案cp3'}]
}, 200)
} else {
this.options = []
}
}
}
el-select輸入的時(shí)候value不會(huì)實(shí)時(shí)變化，而是你要選擇下面的option才會(huì)變化。
然后它選中了，下次打開會(huì)有選中的效果。
總結(jié)
- el-autocomplete主要是針對輸入建議，value會(huì)實(shí)時(shí)刷新，選中不會(huì)有選中效果。
- el-select value不會(huì)實(shí)時(shí)刷新，選中才會(huì)更新value，并且選中會(huì)有選中效果。
到此這篇關(guān)于vue中el-autocomplete與el-select的異同的文章就介紹到這了,更多相關(guān)el-autocomplete與el-select內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文通過實(shí)例代碼給大家介紹了vue底部加載更多,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要給大家介紹了關(guān)于vue路由教程之靜態(tài)路由的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue2.0 axios前后端數(shù)據(jù)處理實(shí)例代碼
本篇文章主要介紹了vue2.0 axios前后端數(shù)據(jù)處理實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了如何寫一個(gè)Vue loading 插件，幫助大家更好的理解和學(xué)習(xí)vue 插件的相關(guān)知識，感興趣的朋友可以了解下2020-11-11
Vue觸發(fā)input選取文件點(diǎn)擊事件操作
這篇文章主要介紹了Vue觸發(fā)input選取文件點(diǎn)擊事件操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue路由傳參三種基本方式詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
Vue實(shí)現(xiàn)戶籍管理系統(tǒng)戶籍信息的添加與刪除方式
這篇文章主要介紹了Vue實(shí)現(xiàn)戶籍管理系統(tǒng)戶籍信息的添加與刪除方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章主要介紹了詳解vue父子模版嵌套案例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
Reflect可以操作對象使用， proxy可以代理對象，但沒有找到為啥有時(shí)一定要在Proxy代理方法中使用Reflect，這篇文章主要介紹了vue3中的Proxy一定要用Reflect的原因解析,需要的朋友可以參考下2023-04-04
vue proxy 的優(yōu)勢與使用場景實(shí)現(xiàn)
這篇文章主要介紹了vue proxy 的優(yōu)勢與使用場景實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06