网站关键词怎么设置/重庆seo优

一，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位的话不需乘1000var 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]
}

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";

    //初始月份(当月及上月)initMonth(){return getNowMonth();},//初始日期(今天及昨天)initDate(){return getNowDate();},

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

import Common from "_c/common";
import { convertUTCTimeToLocalTime, numberFixed } from "@/libs/tools";
export default {mixins: [Common],data() {return {}}}

d，效果

初始日期

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

初始月份

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

二，时间组件

a，时间类型及格式

到月和日期

type=“date”
type=“month”

对应格式：

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

b，组件对应代码

  <span class="search-label">接收时间</span>
<FormItem prop="S_countMonth_GTOE"><DatePickertype="month":default-time="true"v-model="condition.S_countMonth_GTOE"format="yyyy-MM"placeholder="请选择查询时间"style="width: 200px"confirmclearable@on-change="onStartDateChange"></DatePicker></FormItem><span class="search-label">至</span><FormItem prop="S_countMonth_LTOE"><DatePickerv-model="condition.S_countMonth_LTOE"type="month":default-time="true"confirmclearableplacement="bottom-end"class="search-input"@on-change="onEndDateChange"></DatePicker></FormItem>

c，获取时间方法：

    onStartDateChange(date) {this.condition.S_countMonth_GTOE = date;},onEndDateChange(date) {this.condition.S_countMonth_LTOE = date;},

d，初始化赋默认时间：

今天及昨天

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

本月及上月

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

进入页面的初步效果图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>

年月日的清空方法

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

年月的清空方法

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

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

b,解决方案：

$set方法
$ref方法
selected

参考方案一：$set方法

$set方法：官网链接

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

试过之后，这边不可行。

参考方案二：$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();},

清空时调用

 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);},

效果图：

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

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