vue實現模糊/精准查詢


1、為了防止字節抖動

1 npm i --save lodash

2、

1  <Input
2         icon="ios-search"
3         placeholder="搜索"
4         style="width: 200px"
5         v-model="searchItem"
6       />
7 <Table border :columns="columns" :data="devices"></Table>

3、js

 1 <script>
 2 import _ from "lodash";
 3 var vm = {};
 4 var doSearch = _.debounce(function (val) {
 5   if (val) {
 6     val = ("" + val).trim();
 7     vm.devices = vm.searchedDevices.filter((item) => {
 8       return (
 9         item.device_id.indexOf(val) !== -1 ||
10         (item.device_name && item.device_name.indexOf(val) !== -1) 11       );
12     });
13   } else {
14     vm.devices = vm.searchedDevices;
15   }
16 }, 500);
17 
18 export default {
19   data() {
20     vm = this;
21     return {
22         searchItem : "", // input
23         devices : [], //table表中的數據
24         searchedDevices : []
25     },
26     methods: {
27         featch(){
28             // result.data 為接口獲取的數據
29             this.devices = result.data;
30             this.searchedDevices=result.data;
31         }
32     },
33     watch: {
34         searchItem: function (val, oldVal) {
35           doSearch(val);
36         },
37      },
38 }
39 </script>               

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM