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