解决element建议搜索框fetch-suggestions无法显示内容解决方法

最新推荐文章于 2025-09-25 00:04:04 发布

原创最新推荐文章于 2025-09-25 00:04:04 发布 · 7.2k 阅读

9 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

36 篇文章

订阅专栏

本文详细探讨了在使用Element UI中的自动完成组件时，下拉框显示内容为空的解决方法，重点在于value值设置和数据处理技巧。通过实例代码展示了如何调整查询策略并确保建议列表正确显示。

情景：引用elementUI组件里面的建议搜索框时，下拉框显示内容空白。

原因：可能是value值设置的问题，代码如下

html代码：

<el-form-item label="一级客户经理" prop="userNumber1Name">
        <el-autocomplete
          v-model="formlist.userNumber1Name"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入"
          @select="handleSelect1"
        ></el-autocomplete>
</el-form-item>

js代码：

<script>
export default {
  name: "amendinf",
  },
  data() {
    return {
      // 表单验证
      rules: {
        userNumber1Name: [
          { required: true, message: "一级客户经理不能为空", trigger: "blur" },
        ],
      },
      restaurants: [],
    };
  },
  created() {
    this.lod();
    this.restaurants = this.loadAll();
  },
  methods: {
    // 获取模糊查询的数据
    loadAll() {
      this.$api
        .getusernameList()
        .then((res) => {
          console.log("res", res);
          if(res){
          if (res.data.status == 200 && res.data.data.length > 0) {
            this.restaurants = res.data.data;
            return this.restaurants;
          }
          }

        })
        .catch();
    },
    // 根据输入模糊查询处理
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;

      // 解决element建议搜索框无法显示内容 的数据处理
      for (var i = 0; i < restaurants.length; i++) {
        restaurants[i].value = restaurants[i].userName;
      }
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.userName.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    // 选择一级客户经理
    handleSelect1(item) {
      // console.log(item);
      this.formlist.userNumber1 = item.userNumber;
    },

  },
};
</script>

经过querySearchAsync函数里面的数据处理最终效果实现