效果图
<el-form-item label="国家" prop="country"><el-select v-model="dataForm.country" style="width:300px"filterableremotereserve-keywordplaceholder="请输入关键词":remote-method="remoteMethod" clearable><el-option v-for="(item,index) in countryOpt" :key="index" :value="item.value" :label="item.label"></el-option></el-select></el-form-item>
data(){return{countryList:[],//所有国家 我的数据是后端返回的countryOpt:[],//展示的国家dataForm:{country:'',},}},
实现模糊查询的方法
remoteMethod(query){if(query != ''){this.countryOpt = []for(let i in this.countryList){// 模糊查询且不区分大小写if((this.countryList[i]).toLowerCase().indexOf(query.toLowerCase()) != -1){ //未匹配成功时返回-1let obj = {value:this.countryList[i],label:this.countryList[i],}this.countryOpt.push(obj)}}}else{for(let i in this.countryList){let obj = {value:this.countryList[i],label:this.countryList[i],}this.countryOpt.push(obj)}}},
