1 <el-autocomplete style="width:300px" v-model="inputName" :fetch-suggestions="querySearch" clearable placeholder="请输入搜索的内容"></el-autocomplete> 2 3 data() { 4 return { 5 inputName:'', 6 nameTipsArray:[],//用于存放下拉提醒框中数据的数组 7 nameArray:['table_user','table_user01','table_class','menu_table']//页面初始化时全部数据 8 } 9 }, 10 methods:{ 11 querySearch(queruString, cb){ 12 var nameTipsArray = this.nameTipsArray; 13 cb(nameTipsArray); 14 } 15 }, 16 watch:{ 17 inputName:{ 18 handler: function() { 19 this.nameTipsArray = [];//这是定义好的用于存放下拉提醒框中数据的数组 20 var len = this.nameArray.length;//nameArray是页面初始化时全部数据 21 var arr = []; 22 for (var i = 0; i < len; i++) {//根据输入框中inputName的值进行模糊匹配 23 if (this.nameArray[i].indexOf(this.inputName) >= 0) { 24 arr.push(this.nameArray[i]);//符合条件的值都放入arr中 25 } 26 } 27 console.log(arr); 28 29 //el-autocomplete元素要求数组内是对象,且有value属性,此处做一个格式调整 30 for (var i = 0; i < arr.length; i++) { 31 var obj = { value: "" }; 32 obj.value = arr[i]; 33 this.nameTipsArray.push(obj); 34 } 35 } 36 } 37 }