vue实现下拉框 模糊搜索+不区分大小写 (用到了el-select)
效果图<el-form-item label="国家" prop="country"><el-selectv-model="dataForm.country"style="width:300px"filterableremotereserve-keywordplaceholder="请输入关键词":remote-method="remoteMetho
·
效果图
<el-form-item label="国家" prop="country">
<el-select
v-model="dataForm.country"
style="width:300px"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
: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){ //未匹配成功时返回-1
let 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)
}
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)