解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找

做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题。

 

 

 代码1

<el-select v-model="brandNameValue"
multiple
collapse-tags
placeholder="全部"
class="selectBrand"
:filterable = true
remote
reserve-keyword
:remote-method="remoteMethod"
:loading="loading"
@change="handleChangeBrand"
>
<el-option
v-for="(item,index) in brandNameArr"
:key="index"
:label="item"
:value="item"
@change="handleChangeBrand"
>
</el-option>
</el-select>


 


 

mounted(){
let _this = this;

_this.brandNameList();
},

 

 

//数据初始化
data(){
return{
// 品牌数据
brandNameArr:[],
brandNameValue:[],
list: [],
loading: false,
statesArr:[],
  }
}
一下为所用函数

methods{

remoteMethod(query) {
let _this =this;
if (query !== '') {
_this.loading = true;
// 下拉框走的接口==这个接口根据自己的来哦
getBrandNameByName(query).then((result)=>{
        //主要在这里
result.result.map(function(item){
_this.statesArr.push(item.brandName);//item.brandName是我要取的数也就是我查找回来的数据,然后把它放到statesArr中
});
    //brandNameArr是下拉框中那个for循环数据
_this.brandNameArr = _this.statesArr.filter(item => {
return item.indexOf(query) > -1;
});
if(result.code == 20000){//判断看看数据是否返回成功,成功了就给个定时器然后关闭加载效果
setTimeout(() => {
_this.loading = false;
}, 200);
}
}).catch((err) => {
console.log('err :', err)
});
} else {
_this.brandNameArr = [];
}
},

}
 

posted on   三胖儿逆袭  阅读(3575)  评论(1编辑  收藏  举报

编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示