vue el-table表格中的时间戳转换日期格式

在 `element-ui` 的 `el-table` 中，我们可以使用自定义列格式化函数来将时间戳转换为日期格式。首先，我们需要在表格列配置中定义一个格式化函数：

columns: [
  {
    label: '日期',
    prop: 'timestamp',
    formatter: (row, column) => {
      if (!row[column.property]) return ''
      const date = new Date(row[column.property] * 1000)
      return date.toLocaleDateString()
    }
  },
  // ...
]

在这个格式化函数中，我们将时间戳乘以 1000 转换为毫秒值，并使用 `toLocaleDateString()` 方法将其转换为日期格式。然后，在 `el-table` 中使用这个列配置：

<el-table :data="tableData" :columns="columns"></el-table>

这样，我们就可以将时间戳转换为日期格式并在 `el-table` 中显示了。需要注意的是，时间戳字段必须与列配置中的 `prop` 属性一致。

相关问题

el-table-column 用vue时间戳转换

如果你想在 el-table 中展示时间戳，可以使用 el-table-column 的 formatter 属性来进行转换。你可以先定义一个方法来将时间戳转换为你需要的格式，例如：

methods: {
  formatTimestamp(timestamp) {
    const date = new Date(timestamp)
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
  }
}

然后在 el-table-column 中使用这个方法：

<el-table-column prop="timestamp" label="时间">
  <template slot-scope="scope">{{ formatTimestamp(scope.row.timestamp) }}</template>
</el-table-column>

这样就可以将时间戳转换为类似 "2021-06-10 14:30:00" 的格式展示在 el-table 中了。

el-table时间戳转换

如果你使用的是 Element UI 的 el-table 组件，你可以使用 element-ui 的自定义过滤器来将时间戳转换为可读日期格式。以下是一个示例：

1. 先定义一个自定义过滤器

Vue.filter('formatDate', function(value) {
  if (value) {
    return moment.unix(value / 1000).format('YYYY-MM-DD HH:mm:ss')
  }
})

上述代码中，我们使用了 moment.js 库来格式化日期。如果你没有使用 moment.js，也可以使用 JavaScript 原生的 Date 对象进行日期格式化。

2. 在 el-table 中使用自定义过滤器

<el-table :data="tableData">
  <el-table-column prop="time" label="时间"></el-table-column>
  <el-table-column prop="content" label="内容"></el-table-column>
  <el-table-column label="日期">
    <template slot-scope="scope">
      {{scope.row.time | formatDate}}
    </template>
  </el-table-column>
</el-table>

在上述示例中，我们在 el-table-column 中使用了自定义过滤器 `formatDate`。在显示日期的列中，我们使用了 `scope.row.time | formatDate` 的语法来将时间戳转换为可读日期格式。