项目中，后台管理系统里面有个模块用到了时间控件，需要设置起始时间，分别是营业开始时间和营业结束时间，自己搜了一个控件，看着不错就使用了。我用的是以下部分，有个默认的defaultValue，当内容再次修改的时候会显示已保存的时间设置。

 
<template>
  <a-time-picker :default-value="moment('12:08', 'HH:mm')" format="HH:mm" />
</template>
<script>
import moment from 'moment';
export default {
  methods: {
    moment,
  },
};
</script>

在修改页面需要设置默认时间的时候出现问题，一直提示“`defaultValue` provides invalidate moment time. If you want set empty value，use `null`”，

查看官网的API，传递的参数没有错，一度以为是momentjs的问题，-_-||

经过测试发现，通过v-model指定的方式是无法加载的，具体原因没有细节，可能是赋值的机制导致的，只能加载一次，所以无法动态获取数值。

修改方式是先判断默认值是否为null，然后再加载。修改后的代码如下：（仅供参考，我是用了一个隐藏input来提交的表单）

<el-form-item v-if="!isAllDay" label="营业时间开始：" prop="businessHoursBegin">
				<a-time-picker v-if="this.beginTime!==null" :default-value="this.beginTime"  format="HH:mm:ss" @change="onBusinessHoursBeginChange"/>
				<el-input v-if="false" v-model="platformBusinessHours.businessHoursBegin"></el-input>
			</el-form-item>
			<el-form-item v-if="!isAllDay" label="营业时间结束：" prop="businessHoursEnd">
				<a-time-picker v-if="this.endTime!==null" :default-value="this.endTime" format="HH:mm:ss" @change="onBusinessHoursEndChange" />
				<el-input v-if="false" v-model="platformBusinessHours.businessHoursEnd"></el-input>
			</el-form-item>

data() {
			return {
				isAllDay: false,
				beginTime:null,
				endTime:null,

created() {
			xx().then(response => {
this.platformBusinessHours = response.data;
				this.isAllDay = this.platformBusinessHours.allDay == '1'? true:false;
				this.beginTime = moment(this.platformBusinessHours.businessHoursBegin, 'HH:mm:ss');
				this.endTime = moment(this.platformBusinessHours.businessHoursEnd, 'HH:mm:ss');
			});
		},

如果你踩到这个坑，相信一看就懂，代码仅供参考，也不是太复杂的问题。

最后贴一下@change代码，我是用了一个隐藏的input提交表单~

methods: {
			moment,
			onBusinessHoursBeginChange(time, timeString) {
			  this.platformBusinessHours.businessHoursBegin = timeString;
			},
			onBusinessHoursEndChange(time, timeString) {
			  this.platformBusinessHours.businessHoursEnd = timeString;
			},