iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中el-autocomplete与el-select的异同
  • 527
分享到

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

2024-04-02 19:04:59 527人浏览 独家记忆
摘要

目录前言异同el-autocompleteel-select总结前言 最近项目里面需要使用到下拉框的远程搜索,我这边使用的是el-select,其实查看文档我们可以得知,还可以使用e

前言

最近项目里面需要使用到下拉框的远程搜索,我这边使用的是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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue中el-autocomplete与el-select的异同

本文链接: https://www.lsjlt.com/news/150076.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作