1.效果
列表查询中,经常涉及到时间范围的查询,参数传到后端,需要处理一下。
2.vue 页面实现
<el-form-item label="时间" prop="startEnd">
<el-date-picker v-model="startEnd" @change="selectDate" type="daterange" size="small" style=" 202px" align="right"
unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
3.vue method处理
return里要加上startEnd
// 时间处理
selectDate() {
if(this.startEnd === null){
this.startEnd = [];
this.queryParams.beginTime = undefined;
this.queryParams.endTime = undefined;
}else{
this.queryParams.beginTime = this.startEnd[0];
this.queryParams.endTime = this.startEnd[1];
}
},
3.java后端mybatis时间处理
后端查询也需要处理一下
<if test="beginTime != null "> <![CDATA[ AND hp.project_date >= to_date(#{beginTime}, 'yyyy-mm-dd') ]]></if>
<if test="endTime != null "> <![CDATA[ AND hp.project_date <= to_date(#{endTime}, 'yyyy-mm-dd') ]]></if>
时间查询完结。
原文链接:https://blog.csdn.net/CandyLove102130/article/details/120140359