前端表格日期和时间分行显示

最新推荐文章于 2024-09-22 16:55:07 发布

原创最新推荐文章于 2024-09-22 16:55:07 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在ElementAdmin中使用自定义方法handleDate和handleTime将时间戳转换为日期和时间格式，适用于前端展示。

前端代码

我在项目中前端用的是element admin

			<el-table-column label="创建时间" align="center" prop="createtime">
				<template slot-scope="scope">
					<div>{{handleDate(scope.row.createtime)}}</div>
					<div>{{handleTime(scope.row.createtime)}}</div>
				</template>
			</el-table-column>

			handleDate(timestamp){
				var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate());
				return Y+M+D;
			},
			handleTime(timestamp){
				var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
				return h+m+s;
			}