element-ui的两种远程搜索实现

这篇具有很好参考价值的文章主要介绍了element-ui的两种远程搜索实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 实现效果:

element-ui的两种远程搜索实现

2. 利用el-autocomplete实现远程搜索

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

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

<el-autocomplete v-model="namenick" :fetch-suggestions="searchNameNick"         
  placeholder="请输入内容" :trigger-on-focus="false" @select="searchNickhandle">
</el-autocomplete>

// :fetch-suggestions="searchNameNick" : 返回获取到数据的方法,也就是说输入框一获取焦点。就会自动调用该方法拿到数据。
// select="handleSelect" : 当选中建议项时,调用该方法。

async searchNameNick(queryString, callBack){
       //整理参数
        const params ={
            nickname:queryString,
            sys_code:4,
            page:1,
            page_size:100
        }
        // 定义空数组来接收返回的数据
        let nicknameList = []
        let res = await this.$proxy({
            url: `xxxx`,
            method: 'get',
            params
        })
        if(res.code == 0){
            //如果搜索结果为空返回“无匹配结果”
            if(res.data.items.length == 0){
                nicknameList.push({
                    value :"无匹配结果",
                    id : -1
                })
                callBack(nicknameList)
            }else{
            //对获取的值进行遍历,调整数据结构,value
                for (let i = 0; i < res.data.items.length; i++) {
                    //需要注意的是回显的值必须是一个对象数组,且对象属性名称是 “value”,不然回显失败
                    nicknameList.push({
                        value: res.data.items[i].nickname,
                        id: res.data.items[i].user_id
                    })
                }
                clearTimeout(this.timeout)
                this.timeout = setTimeout(() => {
                    callBack(nicknameList)
                    //通过callBack函数将回显数据返回
                }, 1000)
            }
        }else{
            this.$message({
                type: 'error',
                message: '请求失败'
            });
        }
    },
    
     searchNickhandle(item) {
            if (item.id !== -1) {
                console.log(item.id, '昵称点击回调');
                this.user_id = item.id
            }
        },

 3. 利用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 = []
          }
        }
    }

4. 总结:文章来源地址https://www.toymoban.com/news/detail-504350.html

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

到了这里,关于element-ui的两种远程搜索实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue2】element-ui el-transfer扩展 实现多列效果一对多

    vue2 el-transfer 穿梭框实现多类别 template 复制Transfer源码中的template,并拓展我们需要的列表2和button script 这里重写了Transfer的addToLeft方法,按着element-ui的逻辑写出第二个列表的逻辑即可。源码就不做解释了,这个组件比较简单,感兴趣的朋友可以去看看 style GitHub地址

    2024年02月08日
    浏览(59)
  • 在vue项目里,Element-Ui中el-form 实现一行两个表单效果

    1.首先使用elementUi中的Layout 24分栏进行布局,将整个form表单放入24分栏里 如图所示: 2.再将需要同行显示的表单放入el-row中的el-col中去 3.然后再根据你的需求控制一下表单大小就ok啦  全部代码: 效果图如下:  

    2024年02月11日
    浏览(45)
  • 关于修改element-ui中Tabs标签页选中标签下划线缩短居中效果的实现方法

    需求描述: 下划线需要改为原来的一半,并且可以根据元素长度动态更换长度。 原样式: 改为以下样式: 思路如下 :element-ui通过一个独立的元素实现tab间切换能够达到下划线滑动的动态效果,所以将下划线独立为一个元素,并非使用tab自身的盒子设置下边框的样式去实现

    2024年02月12日
    浏览(41)
  • VUE element-ui实现表格动态展示、动态删减列、动态排序、动态搜索条件配置、表单组件化。

        1、本组件支持列表的表头自定义配置,checkbox实现 2、本组件支持列表列排序,vuedraggable是拖拽插件,上图中字段管理里的拖拽效果 ,需要的话请自行npm install 3、本组件支持查询条件动态配置,穿梭框实现 https://download.csdn.net/download/askuld/88216937

    2024年01月16日
    浏览(60)
  • element-ui全局添加loading效果

    前言 在我们的平时的工作中,在前后端交互的时候,为了提高页面的观赏性和用户的体验,我们会在页面上添加loading来阻止用户操作来等待接口的返回,这个时候我们会考虑到全局loading还是局部loading。 需要用到的第三方插件 首先我们需要引入element-ui的Loading组件,这个组

    2024年02月11日
    浏览(53)
  • Element-UI实现的下拉搜索树组件(el-select、el-input、el-tree组合使用)

    1、子组件封装 注意使用:正常使用 // 子组件使用 父组件调用

    2024年02月11日
    浏览(84)
  • [element-ui] el-table行添加阴影悬浮效果

    问题: 在el-table每一行获得焦点与鼠标经过时,显示一个整行的阴影悬浮效果 没有什么效果 原因: box-shadow对display:table-row元素是不起作用的 解决方案: 弊端 给el-table行加阴影的问题算是解决了,但是却导致表格内容无法操作 1、通常,项目设计中,el-table会带一些按钮,比如

    2024年02月04日
    浏览(40)
  • element-ui的el-form表单一行两个显示效果

    效果图:           代码: 因为代码重复所以这些只写了一份   css设置这些就ok了 

    2024年02月11日
    浏览(45)
  • js 实现弹幕效果的两种方法

    首先,在HTML文件中创建画布元素,并在CSS中设置其位置和大小: 接着,在JavaScript中获取画布元素并创建画布上下文对象: 然后,定义一个弹幕类,包含文本、颜色、字体大小、位置和速度等属性: 在弹幕类中添加绘制弹幕的方法: 然后,在页面加载完毕后,创建一个弹幕

    2024年02月16日
    浏览(33)
  • Vue2 + element ui el-select 远程搜索分页懒加载功能实现

    新建指令 :         1、 在 src 目录下 新建文件夹 directive / loadmore         2、在 loadmore 文价夹下新建 elSelectLoadmore.js 和 index.js 文件:            elSelectLoadmore.js index.js 3、在main 文件中注册该指令 4、 基于 el-select 封装 懒加载 远程搜索框 remoteSelect.vue 组件提示

    2024年01月21日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包