vue实现下拉列表远程搜索示例(根据关键词模糊搜索)

VUE 专栏收录该内容
12 篇文章 0 订阅

ddd687e7aa21cf72428b09dc9a6f559c.png

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂

前言

昨天的链接没有放上去……大家访问新站的时候,可以在浏览器地址栏中输入:www.穆雄雄.com或者www.muxiongxiong.cn都可以。

今天分享的效果如下:

fc1a2d72d90f922179efdb7eb998b12a.png
image-20211129150940201

说明

因为部门是全国所有的中心,所以有点多,原来采用的是下拉框来实现的,但是让客户从1W+的数据中找到自己想要的,显然不太现实,况且放在服务器上总是会报加载超时的错。

介于此,于是我们就想了个办法,通过远程搜索下拉的这种方式来实现,只需让客户输入关键词,通过远程只能搜索关键词让客户选择自己所要的部门。(PS:这种方式,放在服务器上还是会报加载超时的错,目前正在优化)

实现

技术栈使用的还是springboot+vue,首先需要将表单处替换成如下代码:

<el-form-item label="部门" prop="deptId">
              <el-select
                v-model="form.deptId"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading">
                <el-option
                  v-for="item in deptListLikeInfo"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId">
                </el-option>
              </el-select>
            </el-form-item>

官方解释是这样的,我觉得说的很明白了:

为了启用远程搜索,需要将filterableremote设置为true,同时传入一个remote-methodremote-method为一个Function,它会在输入值发生变化时调用,参数为当前输入值。需要注意的是,如果el-option是通过v-for指令渲染出来的,此时需要为el-option添加key属性,且其值需具有唯一性,比如此例中的item.value

methods写的如下方法:

remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.deptListLikeInfo = this.deptListFilter.filter(item => {
            return item.deptName.indexOf(query) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },

data中声明如下两个变量,我都有注释:

//部门列表,用来下拉列表模糊查询
      deptListLikeInfo:[],
      //筛选完的部门列表信息
      deptListFilter:[],

mounted中写如下代码,页面加载完时,将所有的部门查询出来。

mounted() {
    listDeptAll().then((res) => {
      this.deptListFilter = res.data;
    });

  },

总结

超时可能是这个原因,mounted中的代码,回头将这一块儿优化优化,因为在本地是没有问题的,问题只出现在服务器上,大家要是还有别的方法,或者建议,可以留言哈,采纳必有奖励~

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:点我我会动 设计师:我叫白小胖 返回首页

打赏作者

穆雄雄

哎,貌似还没开张来着呢~

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值