必须先引入dayjs
import dayjs from 'dayjs'
import type { TableColumnCtx } from 'element-plus'
/**
* 时间日期转换
* @param date 当前时间,new Date() 格式
* @param format 需要转换的时间格式字符串
* @description format 字符串随意,如 `YYYY-MM、YYYY-MM-DD`
* @description format 季度:"YYYY-MM-DD HH:mm:ss QQQQ"
* @description format 星期:"YYYY-MM-DD HH:mm:ss WWW"
* @description format 几周:"YYYY-MM-DD HH:mm:ss ZZZ"
* @description format 季度 + 星期 + 几周:"YYYY-MM-DD HH:mm:ss WWW QQQQ ZZZ"
* @returns 返回拼接后的时间字符串
*/
export function formatDate(date: Date, format?: string): string {
// 日期不存在,则返回空
if (!date) {
return ''
}
// 日期存在,则进行格式化
return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : ''
}
/**
* element plus 的时间 Formatter 实现,使用 YYYY-MM-DD HH:mm:ss 格式
*
* @param row 行数据
* @param column 字段
* @param cellValue 字段值
*/
export function dateFormatter(_row: any, _column: TableColumnCtx<any>, cellValue: any): string {
// 处理空值
if (cellValue == null || cellValue === '') return '';
// 处理 Date 类型
if (cellValue instanceof Date) {
return formatDate(cellValue);
}
// 转换为数字
const numValue = Number(cellValue);
if (isNaN(numValue)) return '';
// 判断时间戳类型(秒级范围:1970~2038年)
const isSeconds = numValue >= 1_000_000_000 && numValue <= 999_999_999_999;
const timestamp = isSeconds ? numValue * 1000 : numValue;
return formatDate(new Date(timestamp));
}
使用方式:先引入 包含 此方法的 formatTime 的ts文件
import { dateFormatter } from "@/utils/formatTime";
然后在vue文件里直接
:formatter="dateFormatter"
例如表格里的时间戳可以直接转换使用