Vue/ElementUI实现input框模糊查询


 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 }

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM