东京热成人网站_XX另类XX伦理XXAV_亚洲精品无码成人AAA片_高清av中文字幕无码_手机看片国产欧美日韩高清_bd美妙第进化型

咨詢電話:
15628812133
21
2023/10

elementUI之利用el-select進行遠程搜索

發(fā)布時間:2023-10-21 18:46:28
發(fā)布者:MaiMai
瀏覽量:
0

el-select給我們提供了遠程搜索功能。可以從服務器搜索數(shù)據(jù),輸入關鍵字進行查找。

為了啟用遠程搜索,需要將filterable和remote設置為true。其中filterable屬性表示是否可搜索,remote屬性表示是否為遠程搜索。

同時還需要傳入一個remote-method。remote-method為一個方法,它會在輸入值發(fā)生變化時調用,參數(shù)為當前輸入值。需要注意的是,

如果el-option是通過v-for指令渲染出來的,此時需要為el-option添加key屬性,且其值需具有唯一性,比如圖中的item.id。循環(huán)的數(shù)組為options,內容為從后臺請求到的數(shù)據(jù)。

DOM結構

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

遠程搜索方法

返回列表