关于element ui中带建议的input框使用时无法获取到后台数据问题

最新推荐文章于 2023-12-07 16:46:14 发布

@fanner

最新推荐文章于 2023-12-07 16:46:14 发布

阅读量947

点赞数

分类专栏：临时文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_60076796/article/details/120535100

版权

临时专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在ElementUi中使用el-autocomplete组件实现动态模糊查询，通过向后台请求数据并绑定到vue实例的data中。关键在于将后台返回数据的键名改为'value'，以匹配输入提示。在querySearch方法中，使用createFilter方法进行筛选，并在loadAll方法中获取和处理数据。在mounted生命周期钩子中初始化数据。

摘要由CSDN通过智能技术生成

Element Ui中有个输入时同步给出建议的input组件，类似于动态的模糊查询，基本原理就是在挂载完成后就向后台发起一个请求，并将后台返回来的数据绑定在data里面，当使用这个输入框时就会直接去筛查前面存起来了数据，直接展示给客户。

问题是将获取的值赋给restaurants后并未获得提示值，经过多次试验发现原来是需要将返回来的数据的键名改成value，这样提示才会显示出来。试验中，还尝试将createFilter()里的value值改成其它，也行不通，并且input框里输入的只能给出value里的提示。

代码如下：

<el-autocomplete
   v-model="orderruleForm.orderId"
   class="inline-input"
   :fetch-suggestions="querySearch"
   :trigger-on-focus="false"> 
</el-autocomplete>

<script>
  export default {
    data() {
      return {
        restaurants: [],
         newarr:[]
      };
    },
    methods: {
            querySearch(queryString, cb) {//获取input里的值并执行createFilter方法
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {//设置一个筛选方法
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {//向后台发起请求，获取数据
                this.$axios.get(this.$api.num2.serachnumber).then((res)=>{
                    res.data.data.forEach((item,index)=>{
                        let obj ={value:item.orderId}
                        this.newarr.push(obj)
                    })
                    this.restaurants =  this.newarr
                }).catch((err)=>{
                    console.log(err)
                })
            },
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>