Vue+elementUI+spring boot实现时间范围模糊查询

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

前言

1.Vue前端

2.后端​​​​​​​

---

前言

时间范围查询

在日常开发中会有使用时间范围来进行查询，通过前端向后端请求来过滤数据，我们可以运用elementUI组件实现此功能。

---

提示：以下是本篇文章正文内容，下面案例可供参考

步骤

1.Vue前端

组件代码如下（示例）：

<el-date-picker
                  v-model="daterange"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  :range-separator="$t('datePicker.range')"
                  :start-placeholder="$t('datePicker.start')"
                  :end-placeholder="$t('datePicker.end')"
                  :picker-options="pickerOptions">
</el-date-picker>

js方法代码如下（示例）：

watch: {
    daterange (val) {
      if (val == null) {
        this.dataForm.startDate = null
        this.dataForm.endDate = null
      } else {
        this.dataForm.startDate = val[0]
        this.dataForm.endDate = val[1]
      }
    }
  },

该处应写在watch中。

2.后端

MyBits代码如下（示例）：

<if test="startDate != null and startDate.trim() != ''">
      and text.time >= #{startDate}
</if>
<if test="endDate != null and endDate.trim() != ''">
     <![CDATA[and text.time  <= #{endDate}]]>
</if>