vue实战 时间查询处理

1.效果

 

 

 

列表查询中，经常涉及到时间范围的查询，参数传到后端，需要处理一下。

 

 

 

2.vue 页面实现

<el-form-item label="时间" prop="startEnd">
　　<el-date-picker v-model="startEnd" @change="selectDate" type="daterange" size="small" style="width: 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