vue中使用搜索框节省流量的方法

在写列表的时候一定要有搜索功能，搜索可以通过监听来实现

<template>
  <div>
    <el-input
      v-model="params.searchWard"
      size="small"
      placeholder="请输入搜索名称"
      style="width: 200px; margin-bottom: 10px"
    >
  </div>
</template>

<script>
export default {
  data(){
    return{
      params:{
        searchWard:''
      }
    }
  },
  watch:{
    params:{
      handler(){
        // 重新请求的方法
        this.load(this.params)
      },
      deep:true
    }
  }
}
</script>

但是这样写会出现一个频繁请求的问题，在搜索框中一输入文字就开始请求，输入几次请求几次，可以采用给input绑定change事件的方法来解决

<template>
  <div>
    <el-input
      v-model="params.searchWard"
      size="small"
      placeholder="请输入搜索名称"
      style="width: 200px; margin-bottom: 10px"
      @change="search"
    >
  </div>
</template>

<script>
export default {
  data(){
    return{
      params:{
        searchWard:''
      }
    }
  },
  methods:{
    search(){
      // 重新请求的方法
      this.load(this.params)
    }
  }
}
</script>

然而这种方法需要在输入完成后点击回车来触发方法，还有给监听加上防抖函数的方法

<template>
  <div>
    <el-input
      v-model="params.searchWard"
      size="small"
      placeholder="请输入搜索名称"
      style="width: 200px; margin-bottom: 10px"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: {
        searchWard: "",
      },
      timer:null
    };
  },
  watch: {
    params: {
      handler() {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          // 重新请求的方法
          this.load(this.params);
        }, 500);//可以自定义输入框中内容改变之后延迟多少来执行
      },
      deep: true,
    },
  },
};
</script>

这样可以在输入内容后延迟时间来进行请求达到节省流量的目的