el-autocomplete核心参数

可以实现异步的数据拉取，从异步返回的数据中，选择需要的结果，并回显到文本框中。

fetch-suggestions

回调列表，异步的方式获取数据列表，显示在列表框中

@select

当选中某一项时，会触发这个方法，将数据获取到，这时，我们可以将数据回显，或者赋值给父页面上的元素，如果希望赋值父页面上v-model绑定的元素，可以通过v-model原理中说的，绑定input事件，将当前值进行传递即可。

实例代码

子组件代码

<template>   <div>     <el-autocomplete       :fetch-suggestions="fetchSuggestions"       v-model="dataValue"       @select="handleSelect"     >       <template slot-scope="{ item }">{{ item.label }}</template>     </el-autocomplete>   </div> </template> <script> export default {   name: 'SearchLawfirmName',   //allInfos是父组件传来的值，如果allInfos不是父组件传来的就不用这样写   props: ["allInfos"],   data() {     return {dataValue: null}   },   methods: {     fetchSuggestions(queryString, cb) {       let results = this.allInfos;       results = queryString         ? results.filter(this.createFilter(queryString))         : results;       cb(results);     },     createFilter(queryString) {       return (item) => {         return item.value.toUpperCase().match(queryString.toUpperCase());       };     },     handleSelect(item) {       this.dataValue = item.label; // 回调在文框中显示的值       this.$emit('input', item.value);// 绑定到父组件的值     },   } }; </script>  

父页面上引用它

<SearchLawfirmName v-model="searchLawfirmName" :allInfos="allData"></SearchLawfirmName> import SearchLawfirmName from "@/components/SearchLawfirmName/index.vue"; export default { data() {     return {       allData:[         { value: 'result1', label: 'Result 1' },         { value: 'result2', label: 'Result 2' },         { value: 'result3', label: 'Result 3' }       ],       searchLawfirmName:null      }    }    }  

上面代码中，我们通过import引入了自定义组件，再将组件选中的当前值赋给页面属性searchLawfirmName，我们将异步的数据列表allData通过allInfos参数进行传递。