Vue/ElementUI實現input框模糊查詢
阿新 • • 發佈:2020-10-13
1 <el-autocomplete style="width:300px" v-model="inputName" :fetch-suggestions="querySearch" clearable placeholder="請輸入搜尋的內容"></el-autocomplete>
methods:{
querySearch(queruString, cb){ var nameTipsArray = this.nameTipsArray; cb(nameTipsArray); } }, watch:{ inputName:{ handler: function() { this.nameTipsArray = [];//這是定義好的用於存放下拉提醒框中資料的陣列 var len = this.nameArray.length;//nameArray是頁面初始化時全部資料 var arr = []; for (var i = 0; i< len; i++) {//根據輸入框中inputName的值進行模糊匹配 if (this.nameArray[i].indexOf(this.inputName) >= 0) { arr.push(this.nameArray[i]);//符合條件的值都放入arr中 } } console.log(arr); //el-autocomplete元素要求陣列內是物件,且有value屬性,此處做一個格式調整 for (var i = 0; i< arr.length; i++) { var obj = { value: "" }; obj.value = arr[i]; this.nameTipsArray.push(obj); } } } }