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

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

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

区间样式如下:

[VUE - ElementUI] 前端传输一个时间区间作为过滤条件_第1张图片

选择样式如下:
[VUE - ElementUI] 前端传输一个时间区间作为过滤条件_第2张图片
标签如下:timeFrame为日期过滤参数,包含起始日期时间

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

[VUE - ElementUI] 前端传输一个时间区间作为过滤条件_第3张图片注意:timeFrame定义为时间数组格式,开始时间取下标为0,结束时间取下标为1

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

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

[VUE - ElementUI] 前端传输一个时间区间作为过滤条件_第4张图片另外:mybatis-plus比较条件

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

你可能感兴趣的:(Vue,Java,前端,vue.js,javascript)