a-select:远程搜索——防抖节流处理—

a-select:远程搜索——防抖节流处理——基础积累

news2024/12/28 14:58:43

a-select:远程搜索——防抖节流处理——基础积累

效果图
下拉筛选数据：
远程搜索功能：

效果图

在这里插入图片描述

下拉筛选数据：

 <a-select
  show-search
  v-model="form.jobPositionCode"
  placeholder="请选择岗位"
  style="width: 100%"
  @change="jobChange"
  :filter-option="filterOption"
>
  <a-select-option
    v-for="li in jobPositionList"
    :key="li.code"
    :value="li.code"
    >{{ li.displayText }}</a-select-option
  >
</a-select>

filterOption(input, option) {
 return (
    option.componentOptions.children[0].text
      .toLowerCase()
      .indexOf(input.toLowerCase()) >= 0
  );
},

远程搜索功能：

<a-select
  show-search
  v-model="form.executorId"
  placeholder="请选择人员"
  style="width: 100%"
  :filter-option="false"
  @search="getUser"
  @change="userChange"
>
  <a-select-option
    v-for="li in userList"
    :key="li.id"
    :value="li.id"
    >{{ li.userName }}</a-select-option
  >
</a-select>

debounce(callback, delay = 200) {
  clearTimeout(this.timeout);
  this.timeout = setTimeout(() => {
    callback();
  }, delay);
},
userChange(val) {
  this.form.executorName = null;
   let obj = this.userList.find((item) => item.id == val);
   if (obj && obj.id) {
     this.form.executorName = obj.userName;
     this.$forceUpdate();
   }
 },
 getUser(val) {
   this.debounce(() => {
     let params = {
       Filter: val,
       current: 1,
       pageSize: 50,
     };
     this.fetchUser(params);
   });
 },
 fetchUser(params) {
   getList(params).then((data) => {
     if (data.success) {
       this.userList = data.result.items || [];
     }
   });
 },