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

在Vue表格中，我们可以使用过滤器来将时间戳转换为日期格式。首先，我们需要定义一个过滤器函数来将时间戳转换为日期格式：

Vue.filter('dateFormat', function (timestamp) {
  let date = new Date(timestamp)
  let year = date.getFullYear()
  let month = ('0' + (date.getMonth() + 1)).slice(-2)
  let day = ('0' + date.getDate()).slice(-2)
  return year + '-' + month + '-' + day
})

然后，在表格中使用这个过滤器：

<table>
  <thead>
    <tr>
      <th>日期</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in items" :key="item.id">
      <td>{{ item.timestamp | dateFormat }}</td>
    </tr>
  </tbody>
</table>

这样，我们就可以将时间戳转换为日期格式并在表格中显示了。

相关问题

vuetable表格中的时间戳转换日期格式

在 `vuetable` 中，我们也可以使用过滤器来将时间戳转换为日期格式。首先，我们需要在 `data()` 中定义一个过滤器对象：

data() {
  return {
    tableOptions: {
      // ...
      dateFilters: {
        dateFormat(value) {
          if (!value) return ''
          const date = new Date(value * 1000)
          return date.toLocaleDateString()
        }
      }
    }
  }
}

然后，在表格配置中使用这个过滤器：

<vuetable
  :api-url="'/api/data'"
  :fields="fields"
  :sort-order="sortOrder"
  :table-options="tableOptions"
>
</vuetable>

在 `fields` 中，我们需要将时间戳字段与过滤器绑定：

fields: [
  {
    name: 'timestamp',
    title: '日期',
    sortField: 'timestamp',
    formatter: (value, row) => {
      return row['timestamp']
    },
    dateField: true,
    dateInputFormat: 'YYYY-MM-DD',
    dateOutputFormat: 'X',
    dateFilter: 'dateFormat'
  },
  // ...
]

这样，我们就可以将时间戳转换为日期格式并在 `vuetable` 中显示了。需要注意的是，过滤器对象中的 `dateFormat` 必须与 `dateFilter` 中的名称一致。

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` 属性一致。