zfire-newmall-admin/src/components/Autocompletes/index.vue

<template>
  <div @click="handlerClick">
    <el-autocomplete
      id="autocompleteId"
      ref="autocomplete"
      style="width: 100%"
      v-model="selectItem"
      :fetch-suggestions="querySearchAsync"
      placeholder=""
      :debounce="0"
      @select="handleSelect"
    ></el-autocomplete>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      selectItem: this.value
    }
  },
  watch: {
    value(newValue) {
      this.selectItem = newValue
    }
  },
  methods: {
    handlerClick() {
      this.$emit('click')
    },
    handleSelect(value) {
      this.selectItem = value.value
      this.$emit('input', this.selectItem)
      this.$emit('change', value)
    },
    async querySearchAsync(queryString, cb) {
      let data = this.list.filter(item => ~item.value.indexOf(queryString)).slice(0, 100)
      cb(data)
    }
  }
}
</script>

<style></style>