[VUE - ElementUI] 前端传输一个时间区间作为过滤条件

玫城

已于 2023-10-11 23:44:49 修改

阅读量234

点赞数

分类专栏： Vue Java 文章标签：前端 vue.js javascript

于 2023-10-11 23:35:36 首次发布

本文链接：https://blog.csdn.net/weixin_70506521/article/details/133780983

版权

Java 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

Vue

7 篇文章 0 订阅

订阅专栏

应用场景：前端批量查询数据时，往往会将一个日期时间作为一项过滤条件，本处给出参考样例，传输一组日期时间，应用到后台的过滤条件中。

前端样式：（此处使用了年月日时分秒全格式：yyyy-MM-dd HH:mm:ss）

区间样式如下：

选择样式如下：

标签如下：timeFrame为日期过滤参数，包含起始日期时间

<el-form-item label="日期时间" prop="timeFrame">
    <el-date-picker type="datetimerange" v-model="queryParams.timeFrame" 
format="yyyy-MM-dd HH:mm:ss"value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}"
start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至" clearable>
    </el-date-picker>
</el-form-item>

后台处理：此处为mybatis-plus的过滤条件处理方式

注意：timeFrame定义为时间数组格式，开始时间取下标为0，结束时间取下标为1

/**
 * 起始时间
 */
 @TableField(exist = false)
private Date[] timeFrame;

可以看到过滤条件的拼接：

另外：mybatis-plus比较条件

Mybatis-plus写法：
对应函数 lt()：< 小于;  le():<= 小于等于;  gt():> 大于;  ge():>= 大于等于;  ne():<> 不等于
如，创建时间大于等于localDateTime的写法：queryWrapper.ge("create_time", localDateTime);