问题描述

有时候后端返回的数据不易于阅读，需要格式化一下，虽然后端也可以格式化数据，但是在前端格式化会更加方便，且前端的代码部署起来比后端方便多了

简单数据格式化

目标

2024-02-01T15:10:43格式化成2024-02-01 15:10:43

HTML代码

下面代码的scope.row可以拿到整行的数据

1
2
3
4
5
<el-table-column prop="addDate" label="添加时间" align="center">
    <template #default="scope">
        <span>{{ scope.row.addDate.replace('T', ' ') }}</span>
    </template>
</el-table-column>

复杂数据格式化

目标

Wed Feb 07 2024 00:00:00 GMT+0800 (中国标准时间)格式化成2024-02-07 00:00:00

HTML代码

1
<el-table-column prop="reserveDate" label="预约时间" :formatter="formatDate" align="center" />

JavaScript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
 * 格式化日期
 * @param {*} row 行数据
 * @param {*} column 列数据 
 * @param {*} cellValue 单元格值，这个是要格式化的数据
 * @param {*} index 索引值 
 */
const formatDate = (row, column, cellValue, index) => {

    // 创建 Date 对象并解析原始日期字符串
    var originalDate = new Date(cellValue);

    // 提取年、月、日、时、分、秒
    var year = originalDate.getFullYear();
    var month = (originalDate.getMonth() + 1).toString().padStart(2, '0');
    var day = originalDate.getDate().toString().padStart(2, '0');
    var hours = originalDate.getHours().toString().padStart(2, '0');
    var minutes = originalDate.getMinutes().toString().padStart(2, '0');
    var seconds = originalDate.getSeconds().toString().padStart(2, '0');

    // 构建新的格式化日期字符串
    var formattedDateString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    
    return formattedDateString
}