zoukankan      html  css  js  c++  java
  • ElementUI 输入框模糊搜索数据处理的坑

    前言:

      最近在遇到一个需求,输入框(input)模糊搜索的功能,我用到的是ElementUI的<el-autocomplete></el-autocomplete>组件,但是在使用的过程中遇到了一些坑,分享一下

    坑1:

      根据官方提供的方法

    querySearch(queryString, cb) {
         let params = {
             um: queryString
           }
         customerOrderApi.getUmList(params).then(res => {
             var restaurants = res;
             var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                  // 调用 callback 返回建议列表的数据
                  cb(results);
                })
             },
    createFilter(queryString) {
         let restaurant = this.restaurants;
             return (restaurant) => {
                 return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
               };
           },
    

      但是数据死活加载不出来一直是这个状态

     最后我发现后台返回给我的数据类型是

      ["火鸡面","粗面"]

    但是官方给的数据类型是

      [{value: "火鸡面"},{value: "粗面"}]

    解决:

      所以最后通过改变数据类型解决

      

     querySearch(queryString, cb) {
                    let params = {
                        um: queryString
                    }
                    customerOrderApi.getUmList(params).then(res => {
                /** @关键代码 let obj = new Object(); let arr = []; res.forEach((item, index) => { obj.value = item arr.push(obj) })
                */ var restaurants = arr; var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; // 调用 callback 返回建议列表的数据 cb(results); }) },

      

  • 相关阅读:
    Gradle学习之基础篇
    springmvc上传文件方法及注意事项
    SpringCloud学习之feign
    SpringCloud学习之eureka集群配置
    SpringMvc+Spring+MyBatis 基于注解整合
    SpringBoot学习之SpringBoot执行器
    SpringBoot跨域问题解决方案
    SpringCloud学习之快速搭建分布式配置
    MySQL-Innodb存储结构
    PG-流复制
  • 原文地址:https://www.cnblogs.com/qlb-7/p/14475859.html
Copyright © 2011-2022 走看看