a-select: componente desplegable para implementar filtrado + función de búsqueda remota - acumulación básica

representaciones

Desplácese para filtrar datos:

 <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
  );
},

Función de búsqueda remota:

<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 || [];
     }
   });
 },