ant-design-vue的日期组件a-range-picker赋值的问题

在使用ant-design-vue的日期组件时,总是会碰到赋值问题,习惯性的赋值就是直接给日期组件的变量赋值字符串类型,如下

// html部分
<a-range-picker v-model="dateValue" :format="'YYYY-MM-DD'"/>
// js部分
data() {
	return {
		dateValue: []
	}
}
methods: {
	changeDate() {
		this.dateValue = ['2024-01-08', '2024-01-08']
	}
}

此时单从页面上看,能成功赋值,但是控制台会报个错
在这里插入图片描述
这是因为该时间组件默认只能接收moment类型的时间,此时需要借助于moment插件来进行以下转换,如下

import moment from 'moment'// 不需要单独安装,vue已经安装了
methods: {
	changeDate() {
		this.dateValue = ['2024-01-08', '2024-01-08']
	}
}

ant-design-vue的日期组件a-range-picker赋值的问题_第1张图片
发现此时就可以正常赋值了且不报错,但是问题又来了,打印变量发现变量的值也是moment,又需要再次进行转换,很麻烦。那么要怎么解决呢?

查阅ant文档发现一个属性
在这里插入图片描述
以上问题是因为没有指定valueFormat,指定该值后就不用来回转了,如下

// html部分
<a-range-picker v-model="dateValue" :format="dateFormat" :valueFormat="dateFormat"/>
// js部分
data() {
	return {
		dateValue: []
	}
},
methods: {
	changeDate() {
		this.dateValue = ['2024-01-08', '2024-01-08']
	}
}

最终结果如下
ant-design-vue的日期组件a-range-picker赋值的问题_第2张图片

你可能感兴趣的:(vue.js,javascript,前端)