Element 远程搜索

最新推荐文章于 2024-09-06 20:09:03 发布

可乐*不渴

最新推荐文章于 2024-09-06 20:09:03 发布

阅读量206

点赞数

本文链接：https://blog.csdn.net/qq_45725046/article/details/105784276

版权

本文详细介绍了如何在 Element UI 框架中实现远程搜索功能，通过使用组件的远程方法，结合后端API，实现实时检索数据并显示在下拉列表中，提升用户体验。

摘要由CSDN通过智能技术生成

<el-select v-model="moduleQuery.sysNamecn
filterable
remote
reserve-keyword
placeholdere"系统中文名称"
：remote-method="getModuleList"
achange="onChange"
：loading-"loading"
@focus="onFocus"
Style="width：24%
el-option
v-for="item in options"
：key="item.value"
：label="`系统中文名称：${item.sysNamecn}\xa0\xa0 模块名称：${item.modeNamecn}\xa0\xa0模块编号：${item.modeld}`
：value-"item.modeld"
/el-option>
</el-select>
//  \xa0为空格

data（）{return{
list：[],
options：[]
// 字段名
modulequery:{
sysNamecn:"",
sysNameEn："",
modeNameCn:"",
modeNameEn："",
modeld："",
sysId："",

getModuleList(query){
if (query!=="")//query 为输入框的内容
this. loading-true this.$store
. dispatch("vindicateList/getModuleList", query)
then(res =>{
this. loading-false this. list = res. records; this. options=this. list. filter(item=>{
return item
})})
catch(() =>{
this. loading = false;
});
} else this. options=[]
।