您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue中el-autocomplete與el-select的異同點(diǎn)是什么”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“vue中el-autocomplete與el-select的異同點(diǎn)是什么”文章能幫助大家解決問題。
el-autocomplete是使用fetch-suggestions
方法實(shí)現(xiàn),當(dāng)輸入的時(shí)候,會(huì)調(diào)用我們提供的方法,傳入的參數(shù)是輸入的value,以及callback。
我們要把請(qǐng)求到的下拉列表通過callback返回(列表的每一項(xiàng)以key為value
的形式傳,也可以通過value-key
換成其它key)。
代碼如下:
<el-autocomplete v-model="value" :fetch-suggestions="querySearchAsync" placeholder="請(qǐng)輸入內(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的遠(yuǎn)程搜索是通過remote-method
來實(shí)現(xiàn)。當(dāng)你輸入的時(shí)候,會(huì)調(diào)用remote-method
對(duì)應(yīng)的方法來實(shí)現(xiàn)。參數(shù)是傳入當(dāng)前輸入的value值。
然后我們請(qǐng)求后,把el-select的option賦值就可以了。
代碼如下:
<el-select v-model="value" filterable remote reserve-keyword placeholder="請(qǐng)輸入關(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ì)有選中的效果。
關(guān)于“vue中el-autocomplete與el-select的異同點(diǎn)是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。