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

目录
  • 前言
  • 异同
    • 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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue如何监听el-select选择值的变化

    目录 监听el-select选择值的变化 方法很简单@change就可以实现 @change绑定了currStationChange el-select将选中的值传递到需要的位置 方法一 方法二 监听el-select选择值的变化 最近项目中需要用到监听 el-select 选择值的改变 方法很简单@change就可以实现 <el-select clearable                        v-model="formData.stationId"      

  • Vue + Element-ui的下拉框el-select获取额外参数详解

    直接上代码吧~ <el-table-column label="用户类型" width="180"> <template slot-scope="scope"> <el-select v-model="scope.row.roleID" placeholder="请选择" @change="changeRole($event,scope)"> <

  • 浅谈ElementUI el-select 数据过多解决办法

    目录 1. 场景描述 2.解决办法 el-select组件的options条数过多时的解决方案 业务场景 解决思路 注意事项 1. 场景描述 不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好 用人会说element-ui的select有一个remote-method,支持远程搜索,我们让服务端支持一下不就可以了,当然这是一种解决的方案.但是有时候这种方法有时候不一定适用 (1)有时候服务端数据是经过计算返回给

  • 详解element-ui中el-select的默认选择项问题

    详解element-ui中el-select的默认选择项问题

    直接绑定将option中的value值绑定给v-model <template> <div> <el-select v-model="query"> <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-optio

  • el-select数据过多懒加载的解决(loadmore)

    el-select数据过多处理方式 在日常项目中el-select组件的使用频率是非常之高的. 当数据过多时渲染时间非常长, 这里提供几个处理方式. 远程搜索 组件提供了远程搜索方式, 也就是按照你输入的结果匹配选项. 下拉懒加载loadMore 下拉懒加载, 当select滚动到底部时, 你再去请求一部分数据, 加入到当前数据中. 某组件中: <template> <el-select v-model="value" placeholder="请选择&qu

  • Vue中el-form标签中的自定义el-select下拉框标签功能

    Vue中el-form标签中的自定义el-select下拉框标签功能

    页面写死el-select下拉框标签: 通过v-for="item in stateArr"绑定,stateArr声明在Vue组件里面的data参数里面代码如下: 到此这篇关于Vue中el-form标签中的自定义el-select下拉框标签功能的文章就介绍到这了,更多相关Vue el-form标签 自定义el-select下拉框标签内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • element修改form的el-input宽度,el-select宽度的方法实现

    element修改form的el-input宽度,el-select宽度的方法实现

    自从用了element-ui,确实好用,该有的组件都有,但是组件间的样式都固定好了,有时候像form表单这样,页面的input.select等宽度不一定会是一样的,可能有些长,有些短,这时候改变这些控件的宽度就有点麻烦了. 看了网上的好多文章,都没有找到解决方案,很多都说在el-input里面加width,但是效果不好,简单总结一下这个 例如我想要这种效果,把描述和邮箱都的宽度width设置长一点 首先在el-select里面增加style=“width:500px”,发现没有效果,为什么呢,因

  • el-select 下拉框多选实现全选的实现

    在写一个功能时发现el-select支持多选,但是竟然不支持全选,好无语哦,那就自己实现一下吧~有两种方法,第二种感觉简单些 方法一:下拉项增加一个[全选],然后应该有以下几种情况: 下拉选项全都勾选时,[全选]自动勾选: 下拉选项部分勾选时,点击[全选]后,所有下拉项全部勾选: 下拉选项全都未勾选时,点击[全选]后,所有下拉选项不勾选: 下拉选项和[全选]都选上的时候,不勾选任意下拉选项,[全选]按钮就不勾选了: 上面就是我要实现的功能,我好啰嗦...还是看代码吧... html部分: <te

  • 详解vue中v-model和v-bind绑定数据的异同

    vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data

  • 全面解析vue中的数据双向绑定

    1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter.这也正是Vue不兼容IE8以下的原因. 2.Object.defineProerty(); var obj = {}; Object.defineProperty(obj,"hello",{ enumerable: true, //表示这个属性能够通过 for -- in 循环 (是否可枚举); configurable

  • 简单理解vue中el、template、replace元素

    本文实例为大家解析了vue中el.template.replace的元素,供大家参考,具体内容如下 api: http://cn.vuejs.org/api/#el el 类型: String | HTMLElement | Function 限制: 在组件定义中只能是函数. 详细: 为实例提供挂载元素.值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数.注意元素只用作挂载点.如果提供了模板则元素被替换,除非 replace 为 false.元素可以用 vm.$el

  • vue中v-model对select的绑定操作

    1.单选时 <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }

  • el autocomplete支持分页上拉加载使用详解

    目录 el-autocomplete使用 template 实现需求分析 输入框为空时聚焦或失焦后又重新聚焦不会触发请求数据接口 缓存上一次已查询的数据&搜索条件:blurArr.blurTxt 滚动加载指令(监听容器的scroll事件并进行防抖处理) 分页加载 获取数据,并进行格式化 关闭加载圈 分页加载事件 清空输入框,重置上次记录的数据 选中时记录相关数据 数据展示不稳定问题 完整的 scss 文件 完整的 js 文件 el-autocomplete使用 效果图 template <t

  • vue中动态select的使用方法示例

    vue中动态select的使用方法示例

    本文实例讲述了vue中动态select的使用方法.分享给大家供大家参考,具体如下: html代码如下: 通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容 <template> <div class="violationsList"> <div class="type-select"> <select name="selected" id="" v

  • 在Vue中使用Select选择器拼接label的操作

    我就废话不多说了,大家还是直接看代码吧~ <el-form-item label="货道商品" prop="productid"> <el-select v-model="form.productid" filterable placeholder="请选择" @change="changeselect"> <el-option v-for="item in mypr

  • vue中el-autocomplete支持分页上拉加载功能

    目录 el-autocomplete使用 template 实现需求分析 1. 输入框为空时聚焦或失焦后又重新聚焦不会触发请求数据接口 2. 缓存上一次已查询的数据&搜索条件:blurArr.blurTxt 3.滚动加载指令(监听容器的scroll事件并进行防抖处理) 4. 分页加载 4.0 获取数据,并进行格式化 4.1 关闭加载圈 4.2 分页加载事件 4.3 清空输入框,重置上次记录的数据 4.4 选中时记录相关数据 数据展示不稳定问题 完整的 scss 文件 完整的 js 文件 总结 e

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

  • vue中使用input[type="file"]实现文件上传功能

    注意:input[type="file"] 标签中的属性accept="application/msword,application/pdf" 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚发现,如果有遇到这个问题的可以参考下---下面有更改:) ``` <template> <div id="my-careers"> <h

随机推荐