Vue使用Element table表格格式化GMT时间为Shanghai时间

Vue使用Element表格格式化GMT时间为Shanghai时间

说明

阿里巴巴java开发规范规定,数据库必备gmt_create、gmt_modified字段,使用的是GMT时间,在中国使用必然要转换我中国时间。
在这里插入图片描述

在阿里巴巴的Java开发规范中,要求每个表都必备三个字段:id、gmt_create、gmt_modified,这是为了满足数据表的基本设计和维护要求,提高系统的可维护性、可读性以及数据一致性。以下是对这三个字段的说明:

id字段:

类型: bigint unsigned。
主键: 必须作为表的主键,用于唯一标识每一行数据。
自增: 在单表时自增,这意味着每插入一行数据,id 字段的值会自动递增,保证每行数据都有唯一标识。
步长为1: 自增的步长为1,确保每个 id 的值都是相邻的整数。
gmt_create字段:

类型: datetime。
含义: 表示数据行的创建时间。这个字段在主动创建时填充,通常用于记录数据的生成时间。
gmt_modified字段:

类型: datetime。
含义: 表示数据行的最后修改时间。这个字段在数据被动更新时填充,用于记录数据的最后一次修改时间。
为什么这三个字段是必备的?

唯一标识: id 字段作为主键,确保每一行数据都有唯一标识,方便对数据的准确定位和访问。
数据创建时间: gmt_create 记录了数据的创建时间,有助于分析和追踪数据的产生过程。
数据修改时间: gmt_modified 记录了数据的最后一次修改时间,方便追踪数据的变更情况。
这种设计符合数据库表的基本规范,同时有助于构建更加健壮、易于维护和管理的系统。这些规范的制定旨在提高代码的可读性、可维护性,以及数据的完整性和一致性。

格式化

为了格式化表格内容,我使用了formatter用来格式化内容
在这里插入图片描述

下面是table里面的列,对应上面的创建时间和修改时间。为了对比我只对创建时间做格式化。
可以看到我在创建时间这一个列添加了一个属性:formatter="formatGmtTime"

       <el-table-column:sortable="true"prop="gmtCreate"label="创建时间"width="100":formatter="formatGmtTime"></el-table-column><el-table-column:sortable="true"prop="gmtModified"label="修改时间"width="100"></el-table-column>

在使用 moment 解析时间字符串时,它已经默认将其解析为本地时区时间,而不是 GMT。在这种情况下,后续的时区转换操作就会失效。为了确保 moment 正确解析时间为 GMT 时间,我使用 moment.tz 来指定解析时使用 GMT 时区,然后再转换到上海时区。

import moment from 'moment-timezone';formatGmtTime(row, column, cellValue) {const shanghaiTime = moment.tz(cellValue, "GMT").tz("Asia/Shanghai");return shanghaiTime.format("YYYY-MM-DD HH:mm");}

使用到了一个moment扩展库:moment-timezone
下载库

npm install moment-timezone

效果

看下效果,可以看到创建时间转为上海时区的时间了。作为对比修改时间是gmt时间,可以很明显看出来创建时间多了8个小时。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/226501.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

T-Dongle-S3开发笔记——创建工程

创建Hello world工程 打开命令面板 方法1&#xff1a;查看->命令面板 方法2&#xff1a;按F1 选择ESP-IDF:展示示例项目 创建helloworld 选择串口 选择芯片 至此可以编译下载运行了 运行后打印的信息显示flash只有2M。但是板子上电flash是W25Q32 4MB的吗 16M-bit

B3842 起动电流小,工作频率 可达500kHz的Dc-Dc开关电源芯片

B3842/43/44是专为脱线和Dc-Dc开关电源应用设计的恒频电流型Pwd控制器内部包含温度补偿精密基准、供精密占空比调节用的可调振荡器、高增益混放大器、电流传感比较器和适合作功率MOST驱动用的大电流推挽输出颇以及单周期徊滞式限流欠压锁定、死区可调、单脉冲计数拴锁等保护电路…

BDD - Python Behave 配置文件 behave.ini

BDD - Python Behave 配置文件 behave.ini 引言behave.ini配置参数的类型配置项 behave.ini 应用feature 文件step 文件创建 behave.ini执行 Behave查看配置默认值 behave -v 引言 前面文章 《BDD - Python Behave Runner Script》就是为了每次执行 Behave 时不用手动敲一长串…

磁盘管理 :逻辑卷、磁盘配额

一 LVM可操作的对象&#xff1a;①完成的磁盘 ②完整的分区 PV 物理卷 VG 卷组 LV 逻辑卷 二 LVM逻辑卷管理的命令 三 建立LVM逻辑卷管理 虚拟设置-->一致下一步就行-->确认 echo "- - -" > /sys/class/scsi_host/host0/scan;echo "- -…

【小程序】如何获取特定页面的小程序码

一、进入到小程序管理后台&#xff0c;进入后点击上方的“工具”》“生成小程序码” 小程序管理后台 二、进入开发者工具&#xff0c;打开对应的小程序项目&#xff0c;复制底部小程序特定页面的路径 三、粘贴到对应位置的文本框&#xff0c;点击确定即可

Oracle 12c rac 搭建 dg

环境 rac 环境 &#xff08;主&#xff09;byoradbrac 系统版本&#xff1a;Red Hat Enterprise Linux Server release 6.5 软件版本&#xff1a;Oracle Database 12c Enterprise Edition Release 12.1.0.2.0 - 64bit byoradb1&#xff1a;172.17.38.44 byoradb2&#xff1a;…

Redis管道

问题引出 Redis是一种基于客户端-服务端模型以及请求/响应协议的TCP服务。一个请求会遵循以下步骤&#xff1a; 1 客户端向服务端发送命令分四步(发送命令→命令排队→命令执行→返回结果)&#xff0c;并监听Socket返回&#xff0c;通常以阻塞模式等待服务端响应。 2 服务端…

Lunix的奇妙冒险————权限篇

文章目录 一.什么是权限二.用户权限和类别。1.用户2.角色3.更换文件角色 三.文件的类别和对应权限1.文件的类别。2.文件属性权限1.权限说明。2.默认生成文件权限来源3.更改权限 3.文件的执行与删除 四.不同用户共同在一个目录下的权限。1.普通用户家目录2.在同一目录下文件的权…

【Vulnhub 靶场】【Hms?: 1】【简单】【20210728】

1、环境介绍 靶场介绍&#xff1a;https://www.vulnhub.com/entry/hms-1,728/ 靶场下载&#xff1a;https://download.vulnhub.com/hms/niveK.ova 靶场难度&#xff1a;简单 发布日期&#xff1a;2021年07月28日 文件大小&#xff1a;2.9 GB 靶场作者&#xff1a;niveK 靶场系…

别再羡慕别人了!教你如何打造属于自己的私域流量!

目前&#xff0c;随着公域流量的成本不断上升&#xff0c;获取难度越来越大&#xff0c;私域流量的建设已经成为了许多企业和个人品牌的重要选择。私域流量可以实现“一次获取&#xff0c;循环使用”的目标&#xff0c;不仅降低了流量的获取成本&#xff0c;而且可以最大化地发…

探索Apache Commons Imaging处理图像

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;咱们今天来聊聊图像处理。在这个数字化日益增长的时代&#xff0c;图像处理已经成为了一个不可或缺的技能。不论是社交媒体上的照片编辑&#xff0c;还是专业领域的图像分析&#xff0c;图像处理无处不在。而作为…

再谈动态SQL

专栏精选 引入Mybatis Mybatis的快速入门 Mybatis的增删改查扩展功能说明 mapper映射的参数和结果 Mybatis复杂类型的结果映射 Mybatis基于注解的结果映射 Mybatis枚举类型处理和类型处理器 文章目录 专栏精选摘要引言正文动态sql标签ifchoose...when...otherwisewhere、…

【XR806开发板试用】XR806串口驱动CM32M对小厨宝的控制实验

一.说明 非常感谢基于安谋科技STAR-MC1的全志XR806 Wi-FiBLE开源鸿蒙开发板试用活动,并获得开发板试用。 XR806是全志科技旗下子公司广州芯之联研发设计的一款支持WiFi和BLE的高集成度无线MCU芯片&#xff0c;支持OpenHarmony minisystem和FreeRTOS&#xff0c;具有集成度高、…

什么是骨传导耳机?骨传导能保护听力吗?

骨传导耳机是一种非常特殊的蓝牙耳机&#xff0c;它通过骨传导技术将声音直接传送到内耳。这种技术不同于传统耳机&#xff0c;它不通过空气传送声音&#xff0c;而是通过头骨的振动来传送声音。 并且骨传导耳机能够在一定程度上起到保护听力的作用&#xff0c;主要是因为它们不…

python统计分析——单变量描述统计

资料来源于&#xff1a;用Python动手学统计学 1、求和 numpy.sum()&#xff1a;要求求和的对象为数组格式。 也可以使用python的标准函数sum()。 2、平均数 numpy.mean() 3、计数 len() 4、方差 np.var()&#xff1b; 注意ddof的参数设置。ddof即Delta Degrees of Fr…

uniapp:全局消息是推送,实现app在线更新,WebSocket,apk上传

全局消息是推送&#xff0c;实现app在线更新&#xff0c;WebSocket 1.在main.js中定义全局的WebSocket2.java后端建立和发送WebSocket3.通知所有用户更新 背景&#xff1a; 开发人员开发后app后打包成.apk文件&#xff0c;上传后通知厂区在线用户更新app。 那么没在线的怎么办&…

Linux中的gcc\g++使用

文章目录 gcc\g的使用预处理编译汇编链接函数库gcc选项 gcc\g的使用 这里我们需要知道gcc和g实际上是对应的c语言和c编译器&#xff0c;而其他的Java&#xff08;半解释型&#xff09;&#xff0c;PHP&#xff0c;Python等语言实际上是解释型语言&#xff0c;因此我们经常能听…

DML语言(重点)———update

格式&#xff1a;update 要修改的对象 set 原来的值新值 -- 修改学员名字,带了简介 代码案例&#xff1a; -- 修改学员名字,带了简介 UPDATE student SET name清宸 WHERE id 1; -- 不指定条件情况下&#xff0c;会改动所有表&#xff01; 代码案例…

边缘计算网关:在智慧储能系统中做好储能通信管家

背景 目前储能系统主要由储能单元和监控与调度管理单元组成&#xff0c;储能单元包含储能电池组(BA)、电池管理系统(BMS)、储能变流器(PCS)等&#xff1b;监控与调度管理单元包括中央控制系统(MGCC)、能量管理系统(EMS)等。 2021年8月&#xff0c;国家发改委发布《电化学储能…

Vscode新手安装与使用

安装与版本选择 VS Code 有两个不同的发布渠道&#xff1a;一个是我们经常使用的稳定版&#xff08;Stable&#xff09;&#xff0c;每个月发布一个主版本&#xff1b;另外一个发布渠道叫做 Insiders&#xff0c;每周一到周五 UTC 时间早上6点从最新的代码发布一个版本&#x…