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