el-select給我們提供了遠程搜索功能。可以從服務器搜索數據,輸入關鍵字進行查找。
為了啟用遠程搜索,需要將filterable和remote設置為true。其中filterable屬性表示是否可搜索,remote屬性表示是否為遠程搜索。
同時還需要傳入一個remote-method。remote-method為一個方法,它會在輸入值發生變化時調用,參數為當前輸入值。需要注意的是,
如果el-option是通過v-for指令渲染出來的,此時需要為el-option添加key屬性,且其值需具有唯一性,比如圖中的item.id。循環的數組為options,內容為從后臺請求到的數據。

接著在remotemethod方法中向后臺請求數據,有關ajax請求后臺數據的內容可以點擊此鏈接>>查看。將loading值先設置為true,當請求數據成功后再改為false,實現加載數據功能。請求到的數據賦值給options(options為下拉列表中循環的數據)。這樣便可以實現輸入關鍵詞,下拉列表中就自動渲染出搜索到的所有相關數據。

下一篇: 常見的css預處理器——Less



