详解element-ui日期时间选择器的日期格式化问题

下面是详解element-ui日期时间选择器的日期格式化问题的完整攻略。

问题描述

当使用Element-UI中的日期时间选择器组件时，在选择日期时间后，组件显示的值的格式不是我们想要的，需要对显示的日期值进行格式化。

解决方法

为了解决上述问题，我们需要使用Element-UI日期时间选择器提供的格式化选项，具体如下：

在组件中设置日期格式化选项

代码示例：

<el-date-picker
  v-model="date"
  type="datetime"
  format="yyyy-MM-dd HH:mm:ss"
  :clearable="false"
  :editable="false"
  placeholder="选择日期时间">
</el-date-picker>

在上述示例中，我们设置了Element-UI日期时间选择器的format选项为"yyyy-MM-dd HH:mm:ss"，这样选择器选择日期时间后显示的日期值就会按照指定的格式进行显示。

在Vue过滤器中设置日期格式化选项

代码示例：

<!-- 定义Vue过滤器 -->
filters: {
  formatDate: function(value) {
    if (!value) return '';
    return moment(value).format('YYYY-MM-DD HH:mm:ss');
  }
}

<!-- 在组件中使用定义的Vue过滤器 -->
<el-table-column label="创建时间" prop="created_at" width="180">
  <template slot-scope="scope">{{ scope.row.created_at | formatDate }}</template>
</el-table-column>

在上述示例中，我们使用moment.js插件定义了名为formatDate的Vue过滤器，在过滤器中使用moment.js插件将日期值转换成我们需要的格式。

总结

在使用Element-UI日期时间选择器组件时，我们可以使用format选项或者Vue过滤器对显示的日期值进行格式化。以上就是详解element-ui日期时间选择器的日期格式化问题的完整攻略。