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

最新推荐文章于 2024-11-19 10:16:07 发布

月月吃喝

最新推荐文章于 2024-11-19 10:16:07 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_43840640/article/details/133068814

Vue 专栏收录该内容

9 篇文章

订阅专栏

文章描述了如何在前端使用el-select组件实现模块的模糊查询功能，通过前端调用后端的`find_module_list`方法，根据用户输入的字符串动态检索数据。后端通过SQL查询处理模糊搜索并返回结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

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

前端实现

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

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

<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>

后端实现

@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