el-select給我們提供了遠(yuǎn)程搜索功能。可以從服務(wù)器搜索數(shù)據(jù),輸入關(guān)鍵字進(jìn)行查找。
為了啟用遠(yuǎn)程搜索,需要將filterable和remote設(shè)置為true。其中filterable屬性表示是否可搜索,remote屬性表示是否為遠(yuǎn)程搜索。
同時(shí)還需要傳入一個(gè)remote-method。remote-method為一個(gè)方法,它會(huì)在輸入值發(fā)生變化時(shí)調(diào)用,參數(shù)為當(dāng)前輸入值。需要注意的是,
如果el-option是通過v-for指令渲染出來的,此時(shí)需要為el-option添加key屬性,且其值需具有唯一性,比如圖中的item.id。循環(huán)的數(shù)組為options,內(nèi)容為從后臺(tái)請求到的數(shù)據(jù)。
接著在remotemethod方法中向后臺(tái)請求數(shù)據(jù),有關(guān)ajax請求后臺(tái)數(shù)據(jù)的內(nèi)容可以點(diǎn)擊此鏈接>>查看。將loading值先設(shè)置為true,當(dāng)請求數(shù)據(jù)成功后再改為false,實(shí)現(xiàn)加載數(shù)據(jù)功能。請求到的數(shù)據(jù)賦值給options(options為下拉列表中循環(huán)的數(shù)據(jù))。這樣便可以實(shí)現(xiàn)輸入關(guān)鍵詞,下拉列表中就自動(dòng)渲染出搜索到的所有相關(guān)數(shù)據(jù)。
下一篇: 常見的css預(yù)處理器——Less
關(guān)鍵詞: