vue中el-select 模糊查询下拉两种方式

第一种：先获取所有下拉数据再模糊查询，效果如下

1，页面代码：speciesList是种类列表List, speciesId 是speciesList里面对应的id，filterable是过滤查询标签

<el-form-item label="种类" prop="speciesId">
  <el-select v-model="queryParams.speciesId" filterable >
    <el-option v-for="option in speciesList"  :key="option.id" :value="option.id"  :label="option.value">
      {{ option.value}}
    </el-option>
  </el-select>
</el-form-item>

 2,js代码

 data() {
    return {
speciesList:[
          { id: 0, value: '狗' },
          { id: 1, value: '猫' },
          { id: 2, value: '兔子' }
        ]]
   }
}

第二种：直接输入查询参数，自动调用接口查询，返回匹配集合List

1，页面代码

 <el-form-item label="种类" prop="speciesId">
    <el-select  v-model="form.speciesId"
       placeholder="种类"  clearable size="mini"  filterable  
       remote  :remote-method="getSpecList">
     <el-option v-for="kv in speciesList" :key="kv.id" :value="kv.id"  :label="kv.title">
     </el-option>
   </el-select>
</el-form-item>

2，js

  /** 查询宠物-种类列表 */
    getSpecList(query) {
      this.queryParams1.title=query;
      listSpecie(this.queryParams1).then(response => {
        this.speciesList = response.rows;
      });
    }

原文地址：https://blog.csdn.net/qq_39772439/article/details/143873025

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！