背景
系统要求设置多选查询,即选择多个对象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条数据,选择器下拉列表多选两条
选择器查询其中两条,下方表格显示两条