vue el-date-picker 时间选择器选择日期范围

el-date-picker选择日期范围

这是element官网上的基础时间选择器选择时间范围

<template>
  <div class="block">
    <span class="demonstration">默认span>
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator=""
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    el-date-picker>
  div>
template>

<script>
  export default {
    data() {
      return {
        value1: '',
      };
    }
  };
script>

显示效果如下图
vue el-date-picker 时间选择器选择日期范围_第1张图片

属性 意义
v-model 上面v-model="value1"意味着当前时间选择器组件和value1的值双向绑定,value1变化,这里面的值也会变化
type 显示类型,默认显示date,这边要选择时间范围,使用daterange
range-separator 选择范围时的分隔符,上面选择“至”做分隔符,可能有至会消失一半的问题,这是样式问题,可以点击element-ui中的el-date-picker 页面至字显示不全的原因及解决查看解决方案
start-placeholder 范围选择时开始日期的占位内容
end-placeholder 范围选择时结束日期的占位内容

在查询中添加时间选择器的查询

<template>
  <div>
    <el-form>
      <el-form-item>
        <el-date-picker
          @change="gettime"
          v-model="rangeDate"
          type="daterange"
          range-separator=""
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        el-date-picker>
      el-form-item>
    el-form>
  div>
template>

<script>
export default {
  data() {
    return {
      rangeDate: "",
      start: "",
      end: "",
    };
  },
  methods:{
    gettime(rangeDate) {
      //定义开始结束时间
      if (rangeDate != null) {
        this.start = rangeDate[0];
        this.end = rangeDate[1];
      }else{
        this.start ='';
        this.end ='';
      }
    },
  }
}
script>

@change:监听表单元素值变化的事件处理器

  • @change="gettime"这里意味着监听gettime方法的触发
    在methods内写gettime要传入双向绑定的rangeDate,rangeDate改变了数据也会变,当我们先选择了开始和结束时间,但是又清空的时候会报一个读取对象属性为null的错误,这说明rangeDate为null了,所以我们要在方法内定义开始和结束时间之前先判断rangeDate不为空,不为空才可定义开始和结束时间是rangeDate的第一和二值,否则就变为空字符串,也就是全局变量的初始状态

value-format="yyyy-MM-dd"是自定义的一个显示格式,可有可无

前端这个时候就写好了,由于改变了查询条件,我们需要在后端的查询方法内修改高级查询QueryWrapper的查询条件
时间选择分两种,选择了和没选择,由于这个组件一定有开始和结束时间,条件也随之生成,在开始和结束时间都不为空且不为null的情况下才会加上对应的查询条件,数据库内的生日字段必须在开始和结束时间中间才会被查询出来,否则不加新的查询条件,start和end都是前端传过来的

    @Override
    /*返回PageUtils工具类对象*/
    public PageUtils queryPage(Map<String, Object> params) {
        String username = (String) params.get("username");
        String sex = (String) params.get("sex");
        String start=(String) params.get("start");
        String end=(String) params.get("end");

        QueryWrapper<User> qw = new QueryWrapper<>();
        /*like-模糊查询*/
        qw.like(StringUtils.isNotBlank(username),"username",username)
                .eq(StringUtils.isNotBlank(sex),"sex",sex);
        if (StringUtils.isNotBlank(start) && StringUtils.isNotBlank(end)) {
            qw.between("birthday",start,end);
        }
        /*分页查询*/
        IPage<User> page=this.page(new Query<User>().getPage(params),qw);

        return new PageUtils(page);
    }

此时重新运行,在前端就能看到时间选择筛选出的结果
vue el-date-picker 时间选择器选择日期范围_第2张图片

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