多选下拉列表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条数据,选择器下拉列表多选两条

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

相关推荐
七星静香18 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
Jacob程序员19 分钟前
java导出word文件(手绘)
java·开发语言·word
ZHOUPUYU19 分钟前
IntelliJ IDEA超详细下载安装教程(附安装包)
java·ide·intellij-idea
stewie623 分钟前
在IDEA中使用Git
java·git
Gavin_91535 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
Elaine20239138 分钟前
06 网络编程基础
java·网络
G丶AEOM40 分钟前
分布式——BASE理论
java·分布式·八股
落落鱼201340 分钟前
tp接口 入口文件 500 错误原因
java·开发语言
想要打 Acm 的小周同学呀41 分钟前
LRU缓存算法
java·算法·缓存
镰刀出海44 分钟前
Recyclerview缓存原理
java·开发语言·缓存·recyclerview·android面试