el-autocomplete用法,
本文主要介绍了vue中el-autocomplete和el-select的异同。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。需要的朋友可以和边肖一起学习。
目录
前言el-autocompleteel-select的异同总结
前言
最近我们需要在项目中使用下拉框进行远程搜索。我在这里使用el-select。其实看文档就知道也可以用el-autocomplete实现远程搜索。
那么它们具体的异同点是什么呢？今天就来看看吧。
异同
el-autocomplete
El-autocomplete由fetch-suggestions方法实现。输入时，将调用我们提供的方法。输入参数是输入值和回调。
我们想通过回调返回请求的下拉列表(列表中的每一项都是以key的形式作为值传递的，也可以通过value-key换成其他键)。
代码如下：
El-自动完成
v-model=值
:fetch-suggestions= query search sync
Placeholder=请输入内容
/El-自动完成
导出默认值{
data () {
返回{
值：“”
}
},
方法：{
query search sync(query string，cb) {
setTimeout(()={
Cb([{value:答案cp3}])
}, 200)
}
}
你可以看到当el-autocomplete实时输入时，值也是实时变化的，当你选中选项再拉起来，就没有选中的效果了。
因此，el-autocomplete可以理解为输入建议的组件。
el-select
el-select的远程搜索是通过远程方法实现的。进入的时候会调用remote-method对应的方法来实现。参数是传入的当前输入的值。
然后，在我们请求它之后，只需分配el-select选项。
代码如下：
El-选择
v-model=值
可滤过的
遥远的
保留关键字
Placeholder=请输入关键字
:remote-method=remoteMethod
:loading=reqLoading
el-option v-for=选项中的项目:key= item . value :label= item . label :value= item . value /El-option
/el-select
导出默认值{
data () {
返回{
值： ，
reqLoading: false，
选项：[]
}
},
方法：{
remoteMethod(查询){
如果(查询！==) {
this.reqLoading=true
setTimeout(()={
this.reqLoading=false
This.options=[{label:回答cp3 ，value:回答cp3}]
}, 200)
}否则{
this.options=[]
}
}
}
输入el-select时，该值不会实时改变，但只有在选择以下选项时才会改变。
然后被选中，下次打开就会有选中的效果。
总结
El-autocomplete主要针对输入建议。值将实时刷新，并且选择将没有选择效果。El-select值不会实时刷新，但是选中时会更新值，选中的值会有选中的效果。这就是这篇关于vue中el-autocomplete和el-select的异同的文章。有关el-autocomplete和el-select的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。