如何格式化Vuetify数据表日期列？

Question

我有一个使用 Vuetify 数据表的简单数据表。其中一列是 createdOn （日期时间），我想对其进行格式化。我该怎么做 ？

这就是我现在得到的：

 <template>
   <v-layout>
      <v-data-table :headers="headers" :items="logs">
      </v-data-table>
   <v-layout>
</template>
<script>
      headers: [
        { text: "Time", value: "createdOn", dataType: "Date" },
        { text: "Event Source", value: "eventSourceName" },
        { text: "Event Details", value: "eventDetails" },
        { text: "User", value: "user" }
      ],
      items: [],
</script>

原文由 Kavin404 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您应该使用 custom row cell ：

 <v-data-table :headers="headers" :items="logs">
  <template v-slot:item.createdOn="{ item }">
    <span>{{ new Date(item.createdOn).toLocaleString() }}</span>
  </template>
</v-data-table>

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我找到了一种使用动态插槽名称和标题对象中的函数来格式化单元格值的方法：

在 <v-data-table> 我做了：

 <template v-for="header in headers.filter((header) => header.hasOwnProperty('formatter'))" v-slot:[`item.${header.value}`]="{ header, value }">
    {{ header.formatter(value) }}
</template>

在 vue data 属性中我做了：

 headers: [
    ...
    { text: 'Value for example', value: '10000', formatter: formatCurrency },
    ...
]

最后在 methods 道具中我做了：

 formatCurrency (value) {
    return '$' + value / 100
},

这是一个沙箱，可以看到它的实际效果： https ://codesandbox.io/s/vuetify-datatable-value-formatter-jdtxj

编辑：在这种特定情况下，您可以使用 momentjs 或 javascript 的 Date()

原文由 SneakyLenny 发布，翻译遵循 CC BY-SA 4.0 许可协议