首先el-select?搜索功能是這樣的:
當我們輸入一個數(shù)據(jù)時下拉列表搜索出來我們輸入的數(shù)據(jù)? 然后按鼠標?或者enter鍵進行選擇粒梦,enter鍵直接默認選擇
兩種情況:
1.創(chuàng)建條目遠程搜索
產(chǎn)品要求是按tab鍵?跳進表單項?輸入數(shù)據(jù)后?按tab鍵?選擇當前輸入的值并跳進下一個表單項
用remote-method獲取到搜索出的列表姆泻,select循環(huán)中的列表搜索出來的列表飒赃,然后tab鍵選擇出搜索列表的第一個,然后再加上個點擊input框時候抄囚,獲取未搜索時的列表數(shù)據(jù)
remoteMethod(query,list) {
if (query !=='') {
this.loading =true;
? ? let arr = []
setTimeout(() => {
this.loading =false;
? ? ? ? arr = list.filter(item => {
return item.code.toLowerCase().indexOf(query.toLowerCase()) > -1;
? ? ? ? });
? ? ? ? this.$set(this,'searchOptions',arr)
this.$forceUpdate()
}, 200);
? }else {
this.searchOptions = list;
? }
},
2.select遠程搜索,相當于輸入個列表中存在的數(shù)據(jù)?按tab鍵?保留輸入的值?跳到下個表單
思路就是我在輸入的時候拿輸入的值去和下拉框比對橄务,如果相同那么賦給model值
:filter-method="(value)=>{filterMethod(value,partCodeList,scope.row,'partCode')}"
filterMethod(value,list,row,name){
let modelValue =''
? modelValue = list.find(item => {
return item.code.toLowerCase() ===value.toLowerCase()
});
? // value.toLowerCase()
? this.$set(row,name,modelValue.code)
},