产品大佬嫌select的远程搜索光标不能单个编辑，于是乎提了要把光标变成单个编辑而不是全选这个需求，我先参考同事的建议想到了手动在focus之后控制触发键盘右键，然后又想到修改element封装源代码，两个解决办法都不靠谱，转了一圈之后发现input也有远程搜索建议功能 ，又在fetch-suggestions参数上踩了很久的坑， 浪费一上午的时间 ，上代码吧 ，希望自己能长记性
html
<el-autocomplete
class="inline-input"
v-model="s_girard"
:fetch-suggestions="remoteMethodGirard"
placeholder="请输入款号"
:trigger-on-focus="false"
size="small"
:loading="loading"
id="1"
></el-autocomplete>
js：
remoteMethodGirard(query,cb){
let results = [{}]
this.s_girard = query;
let self = this
this.loading = true;
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
},
type: 'get',
url: '/admin/get-giard-key',
data: {
girard:query
},
success:function(data){
if(data.result.success){
setTimeout(() => {
self.loading = false;
results = data.content
for(i of results){
i.value = i.girard
}
cb(results);
}, 200);
}
}
});
},
值得注意的是：fetch-suggestions 返回参数是queryString, callback（上面的cb）通过调用 callback(data:[]) 来返回。
为什么选择input组件群下的el-autocomplete 而不是select下的远程搜索?
因为点击选中时可获取到选中行的附带信息即一个对象, 而select组件下的远程搜索只能选中点击的字符串.
最最需要注意：
后台获取的数组中每一个对象必须要有一个value字段, 因为autocomplete只识别value字段并在下拉列中显示（这个我真的ctmd找了很久的bug，感谢度娘，感谢大佬原文章https://blog.csdn.net/qq_37746973/article/details/78402812）
js也可以参考大佬的高端axios
//queryString 为在框中输入的值
//callback 回调函数,将处理好的数据推回
querySearchAsync(queryString, callback) {
var list = [{}];
//调用的后台接口
let url = 后台接口地址 + queryString;
//从后台获取到对象数组
axios.get( url ).then((response)=>{
//在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
for(let i of response.data){
i.value = i.想要展示的数据; //将想要展示的数据作为value
}
list = response.data;
callback(list);
}).catch((error)=>{
console.log(error);
});
}
网友评论