Vue.js时间格式化技巧

"在Vue.js应用中，时间格式化是一个常见的需求，特别是在数据展示时，如表格中的日期列。此示例中展示了如何在Vue组件内实现时间的格式化，以便将服务器返回的日期时间数据转化为用户友好的格式。这里使用了Element UI库中的`el-table-column`组件，并定义了一个自定义的`formatter`函数来处理时间格式。" 在Vue.js中，时间格式化通常涉及到将后端传递的日期时间字符串转换为易于阅读的形式。在给定的例子中，开发者使用了Element UI，这是一个流行的前端UI框架，它提供了丰富的组件库，如表格（`el-table`）。 首先，我们看到在`el-table-column`的定义中，`prop="AuditEndTime"`用于指定表格列对应的数据字段，`label="处理时间"`设置列的标题，`width="120"`定义列的宽度，`:formatter="dateFormat"`则指定了一个名为`dateFormat`的方法来格式化时间，`align="center"`让内容居中对齐。 `dateFormat`方法接收四个参数：`row`表示当前行的数据对象，`column`表示当前列的配置对象，`cellValue`是单元格的值（即未格式化的时间），`index`是当前行的索引。在方法内部，首先检查`daterc`（即`row[AuditEndTime]`）是否不为空，如果非空，就开始进行格式化。 日期时间字符串通常以一种特定的格式存储，例如，这里可能是JSON Web服务返回的日期格式，即`/Date(时间戳)/`。因此，我们需要去除前后括号，并将时间戳转换为整数。通过`parseInt()`函数，我们可以将这个字符串转换成JavaScript能够识别的数值。 接下来，创建一个`Date`对象，传入解析出的时间戳。然后，我们可以通过`getFullYear()`、`getMonth()+1`（注意月份是从0开始的）、`getDate()`、`getHours()`、`getMinutes()`和`getSeconds()`这些方法获取年、月、日、小时、分钟和秒。 最后，将这些值组合成形如"YYYY-MM-DD HH:mm:ss"的格式，并返回这个格式化后的时间字符串。 这种格式化方法对于显示日期时间非常实用，特别是当后端数据和前端展示需要统一格式时。需要注意的是，月份加1是因为`getMonth()`返回的是0-11，而不是1-12。此外，还可以根据实际需求调整时间格式，例如添加短横线或冒号的前导零，或者使用24小时制等。