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

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