在前端将时间格式化成自己想要的格式

今天在做项目的时候在把从数据库查询出来的数据绑定到前端页面是发现了前端页面展示的时间是精确到秒的例如：2023-07-26 12：11：30    但是由于一系列原因我需要将时间展示成2023-07-26所以我需要转换时间格式。

首先我前端用的是Element-UI的组件式开发，我用的是Table 表格组件 

如下图：

 我的时间展示成这样：

 那如何将时间展示成2023-04-19呢？  这就需要将时间格式化方法如下：

以Element-UI的Table 表格为列：

1.将表示时间的列加上 ：formatter="formatDate'

：formatter="formatDate'

例如这样：

<el-table-column

prop="date"

label="日期" width="180"

:formatter="formatDate" >

</el-table-column>

 然后再前端页面的在Vue 实例中定义 formatDate 方法

formatDate(row) {

const timestamp = row.date;

const date = new Date(timestamp);

const year = date.getFullYear();

const month = date.getMonth() + 1;

const day = date.getDate();

const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;

return formattedDate; }

这样就可以将时间转换成 YYYY-MM-DD 的格式了。

注意：row可以获取到该行的数据，所以用row.date（date表示的是获取你所用的时间字段的数据，用的什么就写什么）