多选下拉列表multiple选择器前后端实现

背景

系统要求设置多选查询,即选择多个对象ID查询它们的数据库存储信息。Element-UI2的示例如下图。

本文以查询一个info表为例,前端请求传入ID,后端根据ID查询数据库。

前端

前端vue使用Element-UI的多选选择器,即在基础选择器是增加multiple属性。

html 复制代码
<template>  <!--multiple  多选-->
  <el-select v-model="queryParams.courtId" filterable clearable multiple
             @keyup.enter.native="handleQuery" placeholder="">
    <el-option
      v-for="item in courtList"
      :key="item.courtId"
      :label="item.courtName"	
      :value="item.courtId">
      <!--显示名称,传参ID-->
    </el-option>
  </el-select>
</template>
javascript 复制代码
data() {
    return {
      courtList: [],	//下拉列表
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        courtId: [],
      },
    }
},
 created() {
   this.getList();
   this.getAllCourt();
 },
 methods: {
   //下拉列表,获取全部可以查询的对象
   getAllCourt(){
     listForAllCourt().then(response => {
       this.courtList = response.data;
     })
   },
   /** 搜索按钮操作 */
   handleQuery() {
     this.queryParams.pageNum = 1;
     this.loading = true;
     //如果选择器输入为空则查询全部
     if (this.queryParams.courtId.length === 0){
       this.getList();     
     }
     else {                //查询选择器多选的对象,像后端传入参数ID
       listInfoMultiple(this.queryParams).then(response => {
         this.infoList = response.rows;
         this.total = response.total;
         this.loading = false;
       });
     }
   },
		

API

javascript 复制代码
import qs from "qs";
export function listInfoMultiple(query) {
  return request({
    url: '/system/info/multiple',
    method: 'post',
    params: query,
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }
  })
}

【务必使用post以及qs参数序列化】,否则可能会报错如下。原因是ID没有在数组当中,而是形成了两个数组,后端读取失败,且符号"[]"是前端特殊符号,无法被传递

powershell 复制代码
Invalid character found in the request target
 [/system/cost/multiple?pageNum=1&pageSize=10&courtId[]=1&courtId[]=2 ].
  The valid characters are defined in RFC 7230 and RFC 3986

正确传参。参数序列化去掉"[]",后端可以用List类型接收参数

powershell 复制代码
Request URL: http://localhost/dev-api/system/info/multiple?
pageNum=1&pageSize=10&status=&courtId=1&courtId=2
Request Method: POST
Status Code: 200 OK

后端

Controller

Post映射;@RequestParam()注解确定接收处理前端参数列表中的哪一个参数;List列表存储接收的参数对象。

java 复制代码
/** 多选下拉列表查询 */
    @PostMapping("multiple")
    public TableDataInfo multipleList(@RequestParam("courtId") List<Long> courtId){
        System.out.println(courtId+"在这里info");
        startPage();
        List<CourtInfo> list = courtInfoService.selectCourtInfoByCourtIds(courtId);
        return getDataTable(list);
    }
ServiceImpl
java 复制代码
@Override
    public List<CourtInfo> selectCourtInfoByCourtIds(List<Long> courtIds){
        List<CourtInfo> list = courtInfoMapper.selectCourtInfoByCourtIds(courtIds);
        return list;
    }
Mapper

@Param注解表示查询参数,与XML语句的foreach标签的属性collection相同

java 复制代码
/**下拉列表多选查询 */
    public List<CourtInfo> selectCourtInfoByCourtIds( @Param("courtIds") List<Long> courtIds);
XML语句

foreach遍历参数列表,以此根据ID查询对象信息。注意,此处要求传入的参数不为空才能遍历查询,否则返回空。

sql 复制代码
<select id="selectCourtInfoByCourtIds" resultMap="CourtInfoResult">
        <include refid="selectCourtInfoVo"/>
        where court_id in
        <foreach item="courtId" collection="courtIds" index="index" open="(" separator="," close=")">
            #{courtId}
        </foreach>
    </select>

效果

总共3条数据,选择器下拉列表多选两条

选择器查询其中两条,下方表格显示两条

相关推荐
坐吃山猪1 小时前
SpringBoot01-配置文件
java·开发语言
我叫汪枫2 小时前
《Java餐厅的待客之道:BIO, NIO, AIO三种服务模式的进化》
java·开发语言·nio
yaoxtao2 小时前
java.nio.file.InvalidPathException异常
java·linux·ubuntu
Swift社区3 小时前
从 JDK 1.8 切换到 JDK 21 时遇到 NoProviderFoundException 该如何解决?
java·开发语言
DKPT4 小时前
JVM中如何调优新生代和老生代?
java·jvm·笔记·学习·spring
phltxy4 小时前
JVM——Java虚拟机学习
java·jvm·学习
拉不动的猪5 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
seabirdssss6 小时前
使用Spring Boot DevTools快速重启功能
java·spring boot·后端
喂完待续6 小时前
【序列晋升】29 Spring Cloud Task 微服务架构下的轻量级任务调度框架
java·spring·spring cloud·云原生·架构·big data·序列晋升