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

news2024/9/22 1:18:25

在使用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']
	}
}

在这里插入图片描述
发现此时就可以正常赋值了且不报错，但是问题又来了，打印变量发现变量的值也是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']
	}
}