ant design vue中时间段range选择框架用法

本文链接：https://blog.csdn.net/weixin_53206711/article/details/115868727

ant design vue 表格查询项有一个非常让人头疼的问题就是时间问题了，时间的传值让前端也很苦恼，如下我整理了一些内容给大家，希望对大家的编码有所帮助
日期选择框之时间段range

<template>
<a-form-model ref="form" :model="form">
<a-row>
<a-col :span="8">
       <a-form-model-item
         :label="i18nTranslate('喜羊羊')"
         :label-col="formItemLayout.labelCol"
         :wrapper-col="formItemLayout.wrapperCol"
         >
         <a-range-picker v-model="timeCreat" @change="onChangeTimeProject" size="default" format="YYYY-MM-DD" style="width:100%" />
      </a-form-model-item>
</a-col>
</a-row>
</template>
<script>
// 用来时间格式的转换必须要引入
import moment from 'moment';
export default {
    name: 'PaperList',
    data() {
        return {
            moment,
            formItemLayout: {
                labelCol: { span: 6 },
                wrapperCol: { span: 14 }
            },
            //  因为一般情况下期望得到的都是对象，所以我们要自己定义一个时间名字(随便定义)
           //  这里定义的都是默认当天的时间段，格式是年月日
            timeValue: [moment(this.getCurrentData(), 'YYYY-MM-DD'), moment(this.getCurrentData(), 'YYYY-MM-DD')],
            form: {},
          };
    },
   mounted() {
      this.getlist();
     }
   methods:{
     onChangeTime(date, dateString) { 
           // 让我们传的值等于我们所选的值
            this.timeValue = date;
         // 需求小技巧：此处为判断我们所选择的时间是否超过三个月，超过了三个月需要友好提醒
            if (this.timeValue[0] && this.timeValue[1]) {
                if (Math.abs(moment(this.timeValue[0]).diff(moment(this.timeValue[1]), 'days')) > 90) {
                    this.$message.info('时间跨度超过3个月，查询时间可能较长', 5);
                }
            }
        },
        /** 获取表格内容 */
      getlist(record) {
            let params = {
                startDate: this.timeValue.length > 0 ? this.timeValue[0].format('YYYY-MM-DD') : '',
                endDate: this.timeValue.length > 0 ? this.timeValue[1].format('YYYY-MM-DD') : '',
                ...record
            };
            你的接口(params).then(res => {
               // 表格的数据来源
                this.data = res.content;
                this.loading = false;
            });
        },
         // 获取当前时间方法
       getCurrentData() {
            return new Date().toLocaleDateString();
        },
    }