vue Element UI 日期时间选择器获取格式问题

淡淡的烟草味﹌ 2022-05-21 00:09 213阅读 0赞

问题：在使用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"
              }
            ]
          }

经过双向绑定，获取到的时间日期在提交表单的时候获取到参数为：

![70][]

而控制台打印的参数为：

![70 1][]

和要求的格式不一致，导致请求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正是我想要的，但是却出现了一下问题：选择好时间后直接报错，并且点击确定，也是同样的错误。

![70 2][]

在确定这样写没错的情况下，查了资料才发现是因为前面我设置了rule，rule的验证规则是change，而这里的value-format也是change，就导致了getTime的冲突，于是乎直接注释掉，该项的rule规则，不会再报错了，并且时间格式也能正常转换。

但是这是出现的问题是，我设置的验证没了。 重新设置了以下代码进行验证以此解决了这个问题

leaveTime: [
              {
                // 注释掉type和trigger，是为了解决格式化时间日期的时候出现的bug
                // type: "date",
                required: true,
                message: "请选择时间"
                // trigger: "change"
              }
            ]

[70]: /images/20220521/dc7adf64fe2e4195a62e9660446f44f6.png
[70 1]: /images/20220521/d031a17dd2a84bd2976bd9b91a2d356d.png
[70 2]: /images/20220521/243d9bde7b704aff8857ca5307d0c6a0.png