Vue iView DatePicker时间组件踩坑

一，iView时间组件：DatePicker封装使用
官网参考：DatePicker属性

实现需求：点击清空,时间自动设置为默认值。
遇到问题：时间格式为年月日的，点击清空时可以自动触发更新；
时间格式为年月时，点击清空可以取到值，但是DatePicker时间组件无法自动更新时间值。

一，获取初始时间的方法

获取初始时间
获取本月及上月
获取今天及昨天

a，/libs/tools.js中加

/**
 * @returns {date} 获取当月及上月
 */
 export const getNowMonth=()=>{
  var date = new Date(); 
  var nowY = date.getFullYear() + "-";
  var nowM =
  date.getMonth() + 1 < 10
    ? "0" + (date.getMonth() + 1)
    : date.getMonth() + 1;
  var getNowMonth=nowY+nowM;
  // var getBeforeMonth=nowY+date.getMonth();
  let getBeforeMonth="";
  if(nowM==1){
     getBeforeMonth= date.getFullYear()-1+ "-"+12;
  }else{
    getBeforeMonth=nowY+date.getMonth();
  }
  return [getBeforeMonth,getNowMonth]
}

/**
 * @returns {date} 获取今天及昨天
 */
export const getNowDate=()=>{
      var date = new Date(); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var nowY = date.getFullYear() + "-";
      var nowM =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1) + "-"
          : date.getMonth() + 1 + "-";
      var nowDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var time = new Date().getTime() - 24 * 60 * 60 * 1000;
      var yesterday = new Date(time);
      var getToday = nowY + nowM + nowDate;
      var getyesterday = yesterday;
      return [getyesterday,getToday]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

b，commponents/common.vue引入

import {
convertUTCTimeToLocalTime,
convertUTCTimeToDate,
convertUTCTimeToMonth,
convertUTCTimeToSecond, 
distanceMonth,
getTimestampToDate,
getTimestampToMonth,
getNowMonth,
getNowDate, 
numberValidator 
} from "@/libs/tools";

import axios from "@/libs/api.request.js";
1
2
3
4
5
6
7
8
9
10
11
12
13
14

    //初始月份(当月及上月)
    initMonth(){
      return getNowMonth();
    },
    //初始日期(今天及昨天)
    initDate(){
      return getNowDate();
    },
1
2
3
4
5
6
7
8

c，页面中引入，mixins注入使用：

import Common from "_c/common";
import { convertUTCTimeToLocalTime, numberFixed } from "@/libs/tools";
export default {
  mixins: [Common],
  data() {
    return {
    }}
    }
1
2
3
4
5
6
7
8

d，效果

初始日期

  created() {
    this.condition.S_date_GTOE = this.initDate()[0];
    this.condition.S_date_LTOE = this.initDate()[1];
    }
1
2
3
4

初始月份

  created() {
        this.condition.S_month_GTOE=this.initMonth()[0]
        this.condition.S_month_LTOE=this.initMonth()[1]
        }
1
2
3
4

二，时间组件

a，时间类型及格式

到月和日期

type=“date”
type=“month”

对应格式：

format=“yyyy-MM-dd”
format=“yyyy-MM”

b，组件对应代码

  <span class="search-label">接收时间</span>
<FormItem prop="S_countMonth_GTOE">
          <DatePicker
            type="month"
            :default-time="true"
            v-model="condition.S_countMonth_GTOE"
            format="yyyy-MM"
            placeholder="请选择查询时间"
            style="width: 200px"
            confirm
            clearable
              @on-change="onStartDateChange"
          ></DatePicker>
            </FormItem>
          <span class="search-label">至</span>
          <FormItem prop="S_countMonth_LTOE">
            <DatePicker
              v-model="condition.S_countMonth_LTOE"
             type="month"
              :default-time="true"
              confirm
              clearable
              placement="bottom-end"
              class="search-input"
             @on-change="onEndDateChange"
            ></DatePicker>
        </FormItem>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

c，获取时间方法：

    onStartDateChange(date) {
      this.condition.S_countMonth_GTOE = date;
    },
    onEndDateChange(date) {
      this.condition.S_countMonth_LTOE = date;
    },
1
2
3
4
5
6

d，初始化赋默认时间：

今天及昨天

created(){
    this.condition.S_date_GTOE = this.initDate()[0];
    this.condition.S_date_LTOE = this.initDate()[1];
}
1
2
3
4

本月及上月

created(){
  this.condition.S_countMonth_GTOE=this.initMonth()[0]
  this.condition.S_countMonth_LTOE=this.initMonth()[1]
}

1
2
3
4
5
6

进入页面的初步效果图1：

进入页面的初步效果图2：

三，清空时效果赋予默认值

在选择日期的过程，清空其他条件及已经选择的日期，但是日期不需要清空，只需要给其初始化的默认值就可以，但是不要重新刷新页面调用接口，也就是不用调用created()方法。

那么我们可以在清空的方法中直接使用初始化的时间赋值

a,清空方法

 <FormItem :label-width="20">
            <span class="chaxun button-style" @click="querygetTabelList">查询</span>
        <span class="button-space reset button-style" @click="resetQueryForm">清空</span>
  </FormItem>
1
2
3
4

年月日的清空方法

  resetQueryForm(){
      this.$refs["queryForm"].resetFields();
      this.condition.S_date_GTOE = this.initDate()[0];
      this.condition.S_date_LTOE = this.initDate()[1];
    },
1
2
3
4
5

年月的清空方法

  resetQueryForm() {
      this.$refs["queryForm"].resetFields();
      this.condition.S_countMonth_GTOE=this.initMonth()[0]
      this.condition.S_countMonth_LTOE=this.initMonth()[1]
  },
1
2
3
4
5

初步试了一下，点击清空时，年月日的时间组价可以及时更新，
但是年月的时间组价就点不动，可以赋到值，但是其组件没更新。

b,解决方案：

$set方法
$ref方法
selected

参考方案一：$set方法

$set方法：官网链接

this.$set(this.someObject, 'b', 2)
1

试过之后，这边不可行。

参考方案二：$ref方法

$set方法：官方链接
此方法可行，但本地使用的是v-model,应该也能用，但是容易赋值出现混乱

其他参考方案：@selected

基本都没效果，这个时间组件的这么多坑也没想到。

d,解决方法

时间改变监听方法中加入：

this.$forceUpdate();

   onStartDateChange(date) {
      this.condition.S_countMonth_GTOE = date;
       this.$forceUpdate();
    },
    onEndDateChange(date) {
      this.condition.S_countMonth_LTOE = date;
      this.$forceUpdate();
    },
    
1
2
3
4
5
6
7
8
9
10

清空时调用

 resetQueryForm() {
      this.$refs["queryForm"].resetFields();
      this.condition.S_countMonth_GTOE=this.initMonth()[0]
      this.condition.S_countMonth_LTOE=this.initMonth()[1]
      this.onStartDateChange(this.condition.S_countMonth_GTOE);
      this.onEndDateChange(this.condition.S_countMonth_LTOE);
    },
1
2
3
4
5
6
7

效果图：

如此，就可以解决掉当时间为年月选择时，清空操作赋默认值没及时更新的问题。

get类似相关文章：时间组件的使用总结
分享最基础的知识，每天前进一小步。喜欢更多就请多多关注，欢迎指导交流。