【测试开发】vue — elementUI select选择器 远程搜索实现

本文讲述了在前端开发中遇到的一个问题,即如何在Vue项目中使用ElementUI的select组件实现远程搜索功能。作者在尝试过程中发现初次搜索无结果,第二次输入时才显示结果。原因是数据未及时获取。通过在computed属性中处理数据并实时监听,成功解决了这个问题,实现了实时搜索展示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先提下背景:就是在测试的过程中,经常需要用到收货这个功能。在PC端下了采购单,再到APP去对应功能里,再输入好多个字段,上传图片等动作后,终于可以提交。
于是,我决定在平台上加个小工具,快捷收货,方便测试用。

那么,在收货操作中,要有收货人这个角色。为了更好的适用性,我决定做成一个搜索框,支持实时搜索人员。于是,从elementUI上找到了select选择器 远程搜索。

这里提一下,前端菜鸟怎么去用elementUI上的这些组件:

  1. 操作官方示例,感受组件的实际效果,确实是否满足你需求。
  2. 展开示例代码,关注使用的字段、方法等。
  3. copy示例代码,用你实际的数据、字段等去替换掉它,直到调试成功。
<template>
  <el-select
    v-model="value"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [],
        value: [],
        list: [],
        loading: false,
        states: ["Alabama", "Alaska", "Arizona",
        "Arkansas", "California", "Colorado",
        "Connecticut", "Delaware", "Florida",
        "Georgia", "Hawaii", "Idaho", "Illinois",
        "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Maryland",
        "Massachusetts", "Michigan", "Minnesota",
        "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire",
        "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Ohio",
        "Oklahoma", "Oregon", "Pennsylvania",
        "Rhode Island", "South Carolina",
        "South Dakota", "Tennessee", "Texas",
        "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin",
        "Wyoming"]
      }
    },
    mounted() {
      this.list = this.states.map(item => {
        return { value: `value:${item}`, label: `label:${item}` };
      });
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
        }
      }
    }
  }
</script>

从示例代码里,可以看出:

  • states应该存放我后端接口返回的数据,示例里states是列表,我接口返回的也是列表,不过里面元素都是对象,每个对象里存着不同人的信息。
  • mounted()方法里面,是在渲染完成后,将states里的列表数据,进一步处理成一个对象,用map()返回一个新的列表,并且赋值给this.list
  • 最终在remoteMethod(query)方法里,根据输入的传参query,对this.list里的数据进行过滤,返回出匹配的数据,赋值到this.options,这样下拉列表就可以展示结果。
    这里的.indexOf(query.toLowerCase()) > -1,大于-1说明只要有就行,不论是不是开头也好,中间也好,或者结尾也好。比如搜“大周”,你输入“大”或者“周”,都可以搜到。

赶紧参考官方示例,满心欢喜地开始修改代码:

// mounted()内容

        mounted() {
            this.list = this.states.map(item => {
                return { value: `${item.id}`, label: `${item.role_name}-${item.ad_real_name}` };
            });
        },
// method()里内容

            remoteMethod(query) {
                if (query !== '') {
                    this.loading = true;
                    this.$axios.post("/api/receiveGoodsQuickly/getWmsAdminInfo", {
                        "ad_real_name": query,
                        "mchid": 6001
                    }).then((response) => {
                        this.states = response.data['content'];
                    });

                    setTimeout(() => {
                        this.loading = false;
                        this.options = this.list.filter(item => {
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 1000);
                } else {
                    this.options = [];
                }
            },
。。。。。。

可是实际执行效果是这样的:
我输入第一次“张三”,没结果。当我再输入一次“张三”,返回出了对应的结果。
我继续输入“李四”,仍然没结果,再输入一次“李四”,结果出来了......

后来发现,还是不能直接套用官方示例的,因为示例代码是直接初始化了数据在states里,而我实际是要去请求后端接口才能拿到数据。如此一来,当我第一次调用到remoteMethod
方法,实际上this.list是null。当我第二次调用的时候,其实出现的是上一次的查询结果。

最终,找到了解决办法,就是在computed增加处理步骤,computed起到侦听的作用,这样可以立即得到处理好的数据。

computed: {
            listSet() {
                return this.states.map(item => {
                    return { value: `${item.id}`, label: `${item.role_name}-${item.ad_real_name}` };
                });
            }
        },
setTimeout(() => {
                        this.loading = false;
                        this.options = this.listSet.filter(item => { // 这里的this.list,换为this.listSet
                            return item.label.toLowerCase()
                                .indexOf(query.toLowerCase()) > -1;
                        });
                    }, 1000);

调试通过,搜索结果实时展示。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值