问题:在使用element ui的时候由于是表单提交,所以使用了rule规则验证。如下:
<el-date-picker v-model="form.leaveTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
rules: {
leaveTime: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change"
}
]
}
经过双向绑定,获取到的时间日期在提交表单的时候获取到参数为:
而控制台打印的参数为:
和要求的格式不一致,导致请求404 。
查看了官网文档,
value-format="yyyy-MM-dd HH:mm:ss"
可以格式化获取到的value,于是乎直接写了一下代码:
<el-date-picker v-model="form.leaveTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
控制台打印到的value正是我想要的,但是却出现了一下问题:选择好时间后直接报错,并且点击确定,也是同样的错误。
在确定这样写没错的情况下,查了资料才发现是因为前面我设置了rule,rule的验证规则是change,而这里的value-format也是change,就导致了getTime的冲突,于是乎直接注释掉,该项的rule规则,不会再报错了,并且时间格式也能正常转换。
但是这是出现的问题是,我设置的验证没了。 重新设置了以下代码进行验证以此解决了这个问题
leaveTime: [
{
// 注释掉type和trigger,是为了解决格式化时间日期的时候出现的bug
// type: "date",
required: true,
message: "请选择时间"
// trigger: "change"
}
]