<template>
  <div>
    <el-autocomplete
      v-model="state"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>
  </div>
</template>
<script>
export default {
  data() {
    return {
      restaurants: [],
      state: "何",
      timeout: null,
      from: {
        keyword: "",
        size: 99999,
        page: 1,
      },
    };
  },
  methods: {
    querySearchAsync(queryString, cb) {
      if (!queryString) {
        cb([]);
        return;
      }
      this.from.keyword = queryString;
      var restaurants = [];
      this.$url.MUrl("userAdminGetPageList", this.from).then((e) => {
        if (e.status == 200) {
          e.data.list.forEach((item) => {
            item.value =
              item.name +
              (item.realName ? "( " + item.realName + " )" : "") +
              " - " +
              item.phone;
            item.value1 = item.realName + item.phone + item.name;
          });
          restaurants = e.data.list;
          var results = queryString
            ? restaurants.filter(this.createStateFilter(queryString))
            : restaurants;
          cb(results);
        }
      });
    },
    // 过滤出state.value中包含queryString的记录
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value1.toLowerCase().indexOf(queryString.toLowerCase()) != -1
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
  },
};
</script>
 
 
 
 
 
 
vue + element的动态下拉框_IT