vue 日期选择和条件查询

最新推荐文章于 2024-07-25 19:00:10 发布

zhang8907xiaoyue

最新推荐文章于 2024-07-25 19:00:10 发布

阅读量5.7k

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/zhang8907xiaoyue/article/details/107946383

版权

Vue.js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>