<template>
    <div>
        <p>输入数据{{ state }}</p>
        <p>因为默认列表展示的对象属性值是value,所以要用value-key改变显示对象的属性值</p>
        <el-autocomplete
  v-model="state"
  value-key="name"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="handleSelect"
></el-autocomplete>
    </div>
</template>
<script>
import { List } from "@/api/essentialData"//引入的接口
export default {
    data(){
        return {
            state:'',
            queryList:[]
        }
    },
    methods:{
        querySearchAsync(queryString, callback){
            if(queryString && queryString != ''){
        List({search:{name:queryString}}).then(response => {
          callback(response.data);
          //response.data的格式相当于[{name:'哈哈',id:1},{name:'呼呼',id:2},...]
        })
      }
        },
        handleSelect(item){//这里选择之后，拿到的就是选择的数组中的那其中一个对象
            console.log('选择结果',item.id)
            //这个时候我们可以把这个id赋值给我们要用的表单的某个属性里，或者这个当做子组件，把这个id$emit推上去

        }
    }
}
</script>