Vue element el-table-column中对日期进行格式化方式(全局过滤器)

针对Vue element el-table-column中对日期进行格式化方式，可以通过全局过滤器来实现，以下是具体步骤。

步骤一：创建全局过滤器

在Vue项目的main.js文件中，定义一个全局过滤器来格式化日期，代码如下：

import Vue from 'vue';
import moment from 'moment';

Vue.filter('formatDate', function(value) {
  if (value) {
    return moment(String(value)).format('YYYY-MM-DD hh:mm:ss')
  }
});

在代码中，我们引入了moment.js库，然后定义了一个全局过滤器formatDate，参数为value，表示过滤的值。在过滤器中，我们通过moment格式化日期，将其返回。

步骤二：在el-table-column中使用过滤器

在Vue组件的template中的el-table-column标签中，添加一个formatter属性，将其设置为刚刚创建的全局过滤器名formatDate，代码如下：

<el-table-column prop="date" label="日期" :formatter="formatDate">

在上述代码中，我们通过prop指定了数据源的日期字段，然后定义了一个表格列，通过label属性设置表头名称。最后通过formatter属性将我们定义的全局过滤器formatDate传入，即可对日期进行格式化成为我们想要的格式。

示例

下面是一个示例，假设我们有一组数据，包含了date字段：

[
  {
    date: '2021-02-14 15:20:00'
  },
  {
    date: '2021-05-01 10:30:00'
  }
]

如果我们按照上述步骤进行定义和设置，那么通过el-table渲染出来的表格，将会将日期格式化为如下格式：

日期
2021-02-14 15:20:00
2021-05-01 10:30:00

示例2

假设我们想要格式化日期为“月份-日”格式，可以按照以下步骤实现：

1. 在全局过滤器中，将格式化代码修改为moment(String(value)).format('MM-DD')

import Vue from 'vue';
import moment from 'moment';

Vue.filter('formatDate', function(value) {
  if (value) {
    return moment(String(value)).format('MM-DD')
  }
});

1. 在el-table-column的formatter属性中，传入修改后的全局过滤器名formatDate，代码如下：

<el-table-column prop="date" label="日期" :formatter="formatDate">

这样，在el-table中渲染出来的日期，就会变成“月份-日”的格式，如下表所示：

日期
02-14
05-01

至此，Vue element el-table-column中对日期进行格式化的全局过滤器的攻略完整介绍完毕。