前端页面多个选择器返回api接口的sql查询高效写法

最新推荐文章于 2025-03-06 14:31:18 发布

原创

最新推荐文章于 2025-03-06 14:31:18 发布 · 721 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

表单查询过滤时，一般前端会有多个Select选择器进行下拉选择进行查询，为了减少接口请求的次数，我一般设计的时候，会尽量把下拉选择器的list数据，都汇总在一个接口，进行返回。

样式引用elementUI中的Selcet选择器，如下：

-- 多个选择器下拉框汇总sql
WITH tab as (
select project from PROBLEM_MANAGE_F group by project
),
tab0 as (
select PROCESS from PROBLEM_MANAGE_F group by PROCESS
),
tab1 as (
select PRODUCT from PROBLEM_MANAGE_F group by PRODUCT
),
tab2 as (
select concat('PROJECT:','[',group_concat(project),']') as project from tab
),
tab3 as 
(
select concat('PRODUCT:','[',group_concat(PRODUCT),']') as PRODUCT from tab1
)
,
tab4 as 
(
select concat('PROCESS:','[',group_concat(PROCESS),']') as PROCESS from  tab0
)
select *from tab4,tab3,tab2 ;