【Vue-Element-Admin】select模糊查询

背景

查询条件：模块
想实现select支持输入字符串，并且可以根据输入值进行检索，输入为空时返回全部数据

前端实现

export default{
    return{
        listQuery:{
            //page:1,
            //limit:20,
            //如果想兼容按条件导出，可以定义查询条件
            module:undefined,
            function_point:undefined
        },
        moduleOptions:null,
        functionPointOptions:null
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

getModuleList(query){
    //是否正在从远程获取数据
    this.moduleSearchLoading=true
    if(query != ''){
        this.listQuery['module']=query
    }
    findModuleList(this.listQuery).then(response=>{
        this.moduleSearchLoading=false;
        this.moduleOptions=response.data['items']
    })
}


1
2
3
4
5
6
7
8
9
10
11
12
13

<template>	
   <el-form-item label="模糊查询" prop="search">
     <el-select v-model="listQuery.module" placeholder="模块" filterable clearable remote :remote-method="getModuleList"  :loading="moduleSearchLoading" @focus="(event)=>getModuleList()" style="width: 100%">
       <el-option v-for="item in moduleOptions" :key="item" :label="item" :value="item" />
     </el-select>
   </el-form-item>
</template>
1
2
3
4
5
6
7

后端实现

@classmethod
def find_module_list(cls,module_name=None):
   try:
       module_list=ModuleDataBase.query.filter(ModuleDataBase.is_delete==0)
       if module_name is not None:
           module_list=ModuleDataBase.query.filter(ModuleDataBase.module.like(f"%{module_name}%"))
       result=[item.module for item in module_list.all()]
       #去重
       return list(set(result))
   except Exception as e
       return False
1
2
3
4
5
6
7
8
9
10
11