vue中el-autocomplete与el-select的异同

 更新时间:2022年05月29日 10:48:39   作者:答案cp3  
本文主要介绍了vue中el-autocomplete与el-select的异同,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

最近项目里面需要使用到下拉框的远程搜索,我这边使用的是el-select,其实查看文档我们可以得知,还可以使用el-autocomplete来实现远程搜索。

那么它们具体有何异同呢?今天我们来看看。

异同

el-autocomplete

el-autocomplete是使用fetch-suggestions方法实现,当输入的时候,会调用我们提供的方法,传入的参数是输入的value,以及callback。

我们要把请求到的下拉列表通过callback返回(列表的每一项以key为value的形式传,也可以通过value-key换成其它key)。

代码如下:

    <el-autocomplete
      v-model="value"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容"
    ></el-autocomplete>
    
    export default {
     data () {
         return {
           value: ''
         }
     },
     methods: {
        querySearchAsync (queryString, cb) {
          setTimeout(() => {
            cb([{value: '答案cp3'}])
          }, 200)
        }
    }

可以看到el-autocomplete实时输入的时候,value也是实时变化的,并且,你选中选项,再次拉起选项的时候,不会有选中的效果。

所以el-autocomplete可以理解为输入建议的组件。

el-select

el-select的远程搜索是通过remote-method来实现。当你输入的时候,会调用remote-method对应的方法来实现。参数是传入当前输入的value值。

然后我们请求后,把el-select的option赋值就可以了。

代码如下:

    <el-select
      v-model="value"
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="reqLoading"
    >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    
    export default {
     data () {
         return {
           value: '',
           reqLoading: false,
           options: []
         }
     },
     methods: {
        remoteMethod (query) {
          if (query !== '') {
            this.reqLoading = true
            setTimeout(() => {
              this.reqLoading = false
              this.options = [{label: '答案cp3',value: '答案cp3'}]
            }, 200)
          } else {
            this.options = []
          }
        }
    }

el-select输入的时候value不会实时变化,而是你要选择下面的option才会变化。

然后它选中了,下次打开会有选中的效果。

总结

  • el-autocomplete主要是针对输入建议,value会实时刷新,选中不会有选中效果。
  • el-select value不会实时刷新,选中才会更新value,并且选中会有选中效果。

到此这篇关于vue中el-autocomplete与el-select的异同的文章就介绍到这了,更多相关el-autocomplete与el-select内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue项目兼容IE浏览器的教程步骤

    vue项目兼容IE浏览器的教程步骤

    Vue的小伙伴们,困扰大家的IE浏览器支持Vue的问题,目前已经找到了一个比较好的解决方案,下面这篇文章主要给大家介绍了关于vue项目兼容IE浏览器的教程步骤,需要的朋友可以参考下
    2023-03-03
  • vue动态路由刷新失效以及404页面处理办法

    vue动态路由刷新失效以及404页面处理办法

    作为一个前端新手,项目中遇到权限处理时,通常会采用动态添加路由的方法来实现,下面这篇文章主要给大家介绍了关于vue动态路由刷新失效以及404页面处理办法的相关资料,需要的朋友可以参考下
    2023-11-11
  • Vue+Node实现大文件上传和断点续传

    Vue+Node实现大文件上传和断点续传

    文件上传在很多项目中都用的到,如果是几M的很快就传送完毕,如果是大文件呢?本文将利用Vue+Node实现大文件上传和断点续传,感兴趣的可以了解一下
    2022-04-04
  • vue项目中实现el-dialog组件可拖拽效果

    vue项目中实现el-dialog组件可拖拽效果

    本文主要介绍了vue项目中实现el-dialog组件可拖拽效果,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • VueJS全面解析

    VueJS全面解析

    Vue.js(读音 /vju&#720;/, 类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。这篇文章主要介绍了VueJS全面解析的相关资料,需要的朋友可以参考下
    2016-11-11
  • Vue.js用法详解

    Vue.js用法详解

    Vue.js(读音 /vju&#720;/, 类似于 view) 是一套构建用户界面的渐进式框架。这篇文章主要介绍了Vue.js用法详解,需要的朋友可以参考下
    2017-11-11
  • Vue-ANTD表单输入中自定义校验一些正则表达式规则介绍

    Vue-ANTD表单输入中自定义校验一些正则表达式规则介绍

    这篇文章主要介绍了Vue-ANTD表单输入中自定义校验一些正则表达式规则介绍,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 浅谈webpack SplitChunksPlugin实用指南

    浅谈webpack SplitChunksPlugin实用指南

    这篇文章主要介绍了浅谈webpack SplitChunksPlugin实用指南,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue用FileSaverJs导出文件

    vue用FileSaverJs导出文件

    FileSaver.js 是在客户端保存文件的解决方案,非常适合 在客户端上生成文件的 Web 应用,它是 HTML5 版本的 saveAs() FileSaver 实现,这篇文章主要介绍了vue用FileSaverJs导出文件,需要的朋友可以参考下
    2023-09-09
  • Vue 处理异步加载顺序问题之如何在Konva中确保文本在图片之上显示

    Vue 处理异步加载顺序问题之如何在Konva中确保文本在图片之上显示

    在处理Konva中的异步加载顺序问题时,确保在图像加载完成后再添加其他元素是关键,通过将回调函数放在imageObj.onload中,并正确处理变量捕获,我们可以确保文本总是绘制在图片之上,这不仅解决了显示顺序的问题,也为未来的调试提供了明确的方向,感兴趣的朋友一起看看吧
    2024-07-07

最新评论