iview的Select组件远程搜索的BUG优化--以及JS函数节流的应用

iview的Select组件远程搜索的优化使用

业务场景:模糊搜索姓名,点击选择
iview的Select组件远程搜索的BUG优化--以及JS函数节流的应用_第1张图片

template:

 js:
 //模糊查询
    fuzzySearch(keyword) {
    //利用函数节流可以大大减少没必要的多次请求
      clearTimeout(this.fuzzySearch.timer)
      //避免空格、选择之后再调一次接口(iview默认选择完成还会掉一次接口,浪费,必须干掉)
      if (keyword.trim() && this.employeeList.every(item => item.manageName !== keyword)) {
        this.fuzzySearch.timer = setTimeout(() => {
          this.loading1 = true;
          //请求接口
          this.api.get('dimission/findManage', { keyword }).then(res => {
            if (res.state === 200) {
              this.loading1 = false
              this.employeeList = res.data
            } else {
              this.$Notice.error({ title: res.msg })
            }
          })
        }, 800)
      }
    },

你可能感兴趣的:(项目实战)