定义antd vue admin的

2020-11-26  本文已影响0人  万州客

网上也有类似的教程，我这里把初始值和选择范围合在一起来实现了。

截屏2020-11-26下午3.11.11.png

一，Template内容
使用default-value来定义

      <a-form-item
        label="时间范围"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
                :required="true"
      >
        <a-range-picker  
                    :ranges='timeRange'
                    :default-value="[
                       moment().startOf('month'),
                       moment().startOf('day'),
                    ]"
                    :placeholder="['开始时间', '结束时间']"
                    @change="createChange"
                    style="width: 100%" 
                />
      </a-form-item>

二，Script内容
使用moment时，稍微有些重复，可以优化

import moment from 'moment'
export default {
  name: 'SampleChoice',
    data () {
      return {
            trainForm: {
                dateRange: {
                    beginTime: moment().startOf('month').format('YYYY-MM-DD'),
                    endTime: moment().startOf('day').format('YYYY-MM-DD')
                }
            },
            timeRange:
            {
                今天: [moment().startOf('day'), moment()],
                昨天: [moment().startOf('day').subtract(1,'days'), moment().endOf('day').subtract(1, 'days')],
                最近三天: [moment().startOf('day').subtract(2, 'days'), moment().endOf('day')],
                最近一周: [moment().startOf('day').subtract(1, 'weeks'), moment()],
                本月: [moment().startOf('month'), moment()],
                本年: [moment().startOf('year'), moment()]
            },
      }
    },
  methods: {
        moment,
        createChange(dates, dateStrings) {
          this.trainForm.dateRange.beginTime = dateStrings[0]
          this.trainForm.dateRange.endTime = dateStrings[1]
        },
  }
}