在后端添加@JsonFormat
@JsonFormat(shape=JsonFormat.Shape.STRING,pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8")
在这里插public class CdEqInfoVO {
/**
* 设备id
*/
private Long mpntId;
/**
* 设备名称
*/
private String mpntName;
/**
* 时间:更改格式
*/
@JsonFormat(shape=JsonFormat.Shape.STRING,pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8")
private Date photovolaticTime;入代码片
或
前端js 更改前端样式:
定义一个前端的时间格式处理:亲测有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{date | dateFilter("yyyy/mm/dd hh:mm:ss")}}
</div>
</body>
<script src="../js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
date: new Date()
},
filters: {
dateFilter: function (data, format = "") {
var dt = new Date(data);
var y = dt.getFullYear();
var m = (dt.getMonth()+1).toString().padStart(2,"0");
var d = dt.getDate().toString().padStart(2,"0");
var h = dt.getHours().toString().padStart(2,"0");
var mm = dt.getMinutes().toString().padStart(2,"0");
var s = dt.getSeconds().toString().padStart(2,"0");
if (format.toLocaleLowerCase() === "yyyy-mm-dd" ||
format.toLocaleLowerCase() === "") {
return `${y}-${m}-${d}`;
} else if (format.toLocaleLowerCase() === "yyyy/mm/dd") {
return `${y}/${m}/${d}`;
} else if (format.toLocaleLowerCase() === "yyyy-mm-dd hh:mm:ss") {
return `${y}-${m}-${d} ${h}:${mm}:${s}`;
} else if (format.toLocaleLowerCase() === "yyyy/mm/dd hh:mm:ss") {
return `${y}/${m}/${d} ${h}:${mm}:${s}`;
} else {
return `输入的时间格式有误`;
}
}
}
});
</script>
</html>
方法三:在vue中页可以引入moment来解决前端时间转换问题:参考:
https://blog.csdn.net/huangge1199/article/details/104630274/
方法四:vue 中添加一个js页面 util.js
export default {
debug: true,
init(){
Date.prototype.format = function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt))
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
return fmt;
}
},
// 针对 el-table 使用
tableDateFormat:function(row,column){
let date = row[column.property];
if(date === undefined){
return ''
}
return new Date(date).format("yyyy-MM-dd hh:mm:ss");
},
// 针对 el-table 使用
tableDateFormatTwo:function(row,column){
let date = row[column.property];
if(date === undefined){
return ''
}
return new Date(date).format("yyyy-MM-dd");
},
}
然后在 el-table 中可以这样使用:
<el-table-column
prop="dateTime"
width="100"
label="日期" :formatter="this.$util.tableDateFormat">
</el-table-column>