解决前端ELement UI时间控件el-date-picker提交时间误差8小时_element-ui时间控件上的展示的时间,和我数据有出入

问题

前端使用框架与UI：Vue+ElementUI。
在项目开发中使用到了DateTimePicker组件，在选择时间后点击查询发现查询导的内容与预期内容有所偏差，之后发现前端选中的时间在后端接收时相差了八个小时。

原因

我们国家的标准时间是东经120°时间（东八区），而标准时间是格林威治时间（世界时），两者相差了整整8小时。

解决

需要在el-date-picker中设置value-format属性，value-format=“yyyy-MM-dd HH:mm:ss”。

            <el-date-picker
                v-model="value"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
1
2
3
4
5
6

并且在后端实体类上时间字段添加注解：

@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
private LocalDateTime orderTime;
1
2