lodash远程搜索防抖

167 阅读1分钟

安装loadash.js

options 循环的数组

getAllPerson 接口

selecloading 加载动画

 <el-select v-model="drawer_data.duty_person" filterable remote placeholder="请输入关键词"
      :remote-method="remoteMethod" :loading="selecloading" size="small">
            <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.name" />
         
 </el-select>
  remoteMethod(query) {
      // 输入值发生变化时的回调函数
      if (query !== "") {
        this.selecloading = true;
        this.getRemote(query);
      } else {
        this.options = [];
      }
    },
    getRemote: _.debounce(function (query) {
      // 防抖,设置1300毫秒请求一次后台
      getAllPerson({
        code_name: query,
      })
        .then((res) => {
          this.selecloading = false;
          this.options = res.data;
        })
        .catch((err) => {
          this.selecloading = false;
        });
    }, 800),