详解vue2.0的Element UI的表格table列时间戳格式化

下面是详解vue2.0的Element UI的表格table列时间戳格式化的完整攻略。

1. 前言

Element UI是一款基于Vue.js 2.0的框架，它提供了丰富、灵活、高效的前端组件，其中表格（table）组件是应用非常广泛的一个组件，但是默认情况下，它的时间戳列（指Unix时间戳）显示的是毫秒数，不太友好。那么，我们该如何对Element UI的表格table列时间戳进行格式化呢？接下来，我将详细讲解。

2. 如何实现

2.1 获取时间戳列

首先，我们需要获取Element UI的表格table的时间戳列，代码片段如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="createTime" label="创建时间"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

其中，prop属性指定的是表格数据中的时间戳属性名（假设为createTime），label属性指定的是表格列名（可以自定义）。

2.2 时间戳列过滤器的实现

接下来，我们需要实现一个过滤器，对时间戳进行格式化，代码如下：

// 全局注册Element UI的表格时间戳过滤器
Vue.filter('formatTimestamp', function (value) {
  if (value) {
    return moment(value).format('YYYY-MM-DD HH:mm:ss');
  }
  return '';
});

其中，该过滤器使用了Moment.js库，对时间戳进行格式化，格式化后的时间格式为“YYYY-MM-DD HH:mm:ss”，该过滤器的名字为formatTimestamp，可以自定义。

2.3 调用时间戳列格式化过滤器

最后，我们需要在表格中调用上面定义的时间戳过滤器，对时间戳进行格式化，代码如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="createTime" label="创建时间">
      <template slot-scope="scope">
        {{ scope.row.createTime | formatTimestamp }}
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

其中，我们在表格列中定义了一个slot，并在slot中调用过滤器名字为formatTimestamp，即可对表格列中的时间戳进行格式化。

3. 示例说明

以下给出两个示例，说明如何对时间戳进行格式化：

// 示例1：将时间戳格式化为“YYYY-MM-DD HH:mm:ss”
let timestamp = 1629371294000;
let formattedTime = moment(timestamp).format('YYYY-MM-DD HH:mm:ss');
console.log(formattedTime); // 输出：2021-08-19 20:28:14

// 示例2：全局注册Element UI的表格时间戳过滤器
Vue.filter('formatTimestamp', function (value) {
  if (value) {
    return moment(value).format('YYYY-MM-DD HH:mm:ss');
  }
  return '';
});

以上就是详解vue2.0的Element UI的表格table列时间戳格式化的完整攻略，希望对你有所帮助。