vue实现模糊/精准查询

1、为了防止字节抖动

npm i --save lodash

2、

 <Input
        icon="ios-search"
        placeholder="搜索"
        style="width: 200px"
        v-model="searchItem"
      />
<Table border :columns="columns" :data="devices"></Table>

3、js

<script>
import _ from "lodash";
var vm = {};
var doSearch = _.debounce(function (val) {
  if (val) {
    val = ("" + val).trim();
    vm.devices = vm.searchedDevices.filter((item) => {
      return (
        item.device_id.indexOf(val) !== -1 ||
        (item.device_name && item.device_name.indexOf(val) !== -1)
      );
    });
  } else {
    vm.devices = vm.searchedDevices;
  }
}, 500);

export default {
  data() {
    vm = this;
    return {
        searchItem : "", // input
        devices : [], //table表中的数据
        searchedDevices : []
    },
    methods: {
        featch(){
            // result.data 为接口获取的数据
            this.devices = result.data;
            this.searchedDevices=result.data;
        }
    },
    watch: {
        searchItem: function (val, oldVal) {
          doSearch(val);
        },
     },
}
</script>