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

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

相关推荐
计算机学姐5 分钟前
基于SSM的宠物领养平台
java·vue.js·spring·maven·intellij-idea·mybatis·宠物
泰山小张只吃荷园16 分钟前
期末Python复习-输入输出
java·前端·spring boot·python·spring cloud·docker·容器
Mr_Xuhhh18 分钟前
程序地址空间
android·java·开发语言·数据库
YSRM24 分钟前
异或-java-leetcode
java·算法·leetcode
大明湖的狗凯.27 分钟前
MySQL 中的乐观锁与悲观锁
java·数据库·mysql
z2023050832 分钟前
linux之调度管理(13)- wake affine 唤醒特性
java·开发语言
AI人H哥会Java33 分钟前
【JAVA】Java高级:Java网络编程——TCP/IP与UDP协议基础
java·开发语言
工业互联网专业1 小时前
Python毕业设计选题:基于django+vue的期货交易模拟系统的设计与实现
vue.js·python·django·毕业设计·源码·课程设计
悦涵仙子1 小时前
vueuse中的useTemplateRefsList
前端·javascript·vue.js
NightCyberpunk1 小时前
Ajax与Vue初步学习
vue.js·学习·ajax