vue 日期选择和条件查询

最新推荐文章于 2024-10-08 19:48:55 发布

原创最新推荐文章于 2024-10-08 19:48:55 发布 · 6.2k 阅读

12 ·

CC 4.0 BY-SA版权

Vue.js 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用Element UI组件实现日期范围选择的方法，并展示了如何将选定的日期范围应用到供应商信息列表的查询中。通过封装addDateRange函数，可以有效地处理日期范围参数，实现在后端查询条件中的正确应用。同时，详细解释了在mapper.xml文件中如何根据开始时间和结束时间进行数据过滤。

1、template

<el-form-item label="注册时间">
                  <el-date-picker
                    v-model="dateRange"
                    size="small"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>

2、data

data() {
    return {
      // 日期范围
      dateRange: [],

3、methods

methods: {
    /** 查询供应商信息列表 */
    getList() {
      this.loading = true;
      listSupplierInfo(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.supplierInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

4、addDataRange封装

// 添加日期范围
export function addDateRange(params, dateRange) {
	var search = params;
	search.beginTime = "";
	search.endTime = "";
	if (null != dateRange && '' != dateRange) {
		search.beginTime = this.dateRange[0];
		search.endTime = this.dateRange[1];
	}
	return search;
}

5、mapper.xml

<if test="beginTime != null and beginTime != ''"><!-- 开始时间检索 -->
                AND date_format(register_time,'%y%m%d') &gt;= date_format(#{beginTime},'%y%m%d')
</if>