el ui 日期格式化_element 日期格式化

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

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

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

   在 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
     }
   }
   1
   2
   3
   4
   5
   6
   7
   8

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

2. 日期选择器（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>
     1

   • 值绑定：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>
     1

   • 事件处理：如果需要在日期选择变化时手动处理格式化，可以监听 @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 进行进一步操作
       }
     }
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10

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