使用dayjs 对时间戳进行转换
处理方法
- 在vue项目utils目录中,新建一个DateFormat.js文件
import dayjs from "dayjs";
// 日期格式化 YYYY-MM-DD
export const DateFormat = val => {
if (val) {
return dayjs(val).format("YYYY-MM-DD") == "Invalid date" ?
"" :
dayjs(val).format("YYYY-MM-DD");
} else {
return null;
}
};
// 日期时间格式化 YYYY-MM-DD HH:MM:SS
export const DateTimeFormat = val => {
if (val) {
return dayjs(val).format("YYYY-MM-DD HH:mm") == "Invalid date" ?
"" :
dayjs(val).format("YYYY-MM-DD HH:mm");
} else {
return null;
}
};
// 日期时间格式化HH:MM:SS
export const TimeFormat = val => {
if (val) {
return dayjs(val).format("HH:mm:ss") == "Invalid date" ?
"" :
dayjs(val).format("HH:mm:ss");
} else {
return null;
}
};
export default {
install(Vue, Opt) {
// 筛选器
// 日期格式化 HH:MM:SS
Vue.filter("TimeFormat", val => {
return TimeFormat(val);
});
// 日期格式化 YYYY-MM-DD
Vue.filter("DateFormat", val => {
return DateFormat(val);
});
// 日期时间格式化 YYYY-MM-DD HH:mm:ss
Vue.filter("DateTimeFormat", val => {
return DateTimeFormat(val);
});
}
};
- 在main.js中引入 挂载到vue上
import Vue from "vue";
import App from "./App";
import router from "./router";
// 清除浏览器默认样式
import "normalize.css";
import "less";
// 引入ElementUI
import ElementUI from "element-ui";
import "sgm-element-ui/lib/theme-sgm/index.css"
// 引入封装好的国际化插件 详见/lang/config
import {
i18n
} from './lang/config'
import MoneyFormat from '@/utils/DateFormat'
//
Vue.use(DateFormat);
Vue.use(ElementUI);
-页面中使用
<el-table-column prop="price">
<template slot-scope="scope">
<span>{{ scope.row.date| DateTimeFormat}}</span>
</template>
</el-table-column>