el ui 日期格式化

原创于 2024-04-11 11:32:45 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ui

本文详细介绍了如何在ElementUI中，特别是在el-table和el-date-picker组件中进行日期格式化的技巧，包括使用formatter属性、自定义format、value-format配置以及处理change事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用 Element UI（Element-UI）进行日期格式化时，通常涉及到两种常见场景：

表格（el-table）中的日期列格式化：
当您在 el-table 中展示包含日期的列时，可以利用 formatter 属性来格式化单元格中的日期。例如：

<el-table-column prop="updateTime" label="更新时间" width="160" align="center" :formatter="dateFormat"></el-table-column>

在 Vue 组件的 methods 中定义 dateFormat 函数，用于将原始日期数据转换成所需格式：

methods: {
  dateFormat(row, column, cellValue) {
    // 假设 cellValue 是一个毫秒数或标准的 JavaScript Date 对象
    return moment(cellValue).format('YYYY-MM-DD HH:mm:ss'); // 使用 Moment.js
    // 或者
    return new Date(cellValue).toLocaleString(); // 使用原生 JavaScript
  }
}

如果您使用了 Moment.js 库，记得先通过 npm install moment 安装并正确引入。如果使用原生 JavaScript，可以直接操作 Date 对象。

日期选择器（el-date-picker）的值格式化：
对于 el-date-picker 组件，可以通过以下方式进行日期格式化：

显示格式：设置 format 属性来指定日期选择器显示的日期格式：

<el-date-picker v-model="form.dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss"></el-date-picker>

值绑定：el-date-picker 返回的值会自动按照 value-format 指定的格式进行解析和赋值。如果您需要将选中的日期以特定格式传递给后端，可以这样配置：
```
<el-date-picker v-model="form.dateTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" ...></el-date-picker>
```

事件处理：如果需要在日期选择变化时手动处理格式化，可以监听 @change 事件，并在回调函数中处理：

<el-date-picker v-model="form.dateTime" @change="handleChange" ...></el-date-picker>

...

methods: {
  handleChange(date) {
    const formattedDate = moment(date).format('YYYY-MM-DD HH:mm:ss');
    // 根据 formattedDate 进行进一步操作
  }
}

总结起来，无论是对于表格中的日期列还是日期选择器，Element UI 都提供了内置的属性（如 formatter 和 format）以及事件（如 @change）来方便地进行日期格式化。您可以根据项目需求和所使用的日期处理库（如 Moment.js 或原生 JavaScript）来编写相应的格式化逻辑。记得确保已正确安装并引入所需的库。