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

我有一个使用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>

标题：[
{文本：“时间”，值：“createdOn”，数据类型：“日期”}，
{文本：“事件源”，值：“eventSourceName”}，
{文本：“事件详细信息”，值：“事件详细信息”}，
{文本：“用户”，值：“用户”}
],
项目：[]，

您应该使用：

{{新日期（item.createdOn.toLocaleString（）}}

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

在

中，我做了：

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

最后在

方法中

我做了：

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

下面是一个沙箱，可以查看它的实际操作：

编辑：

---

在这种情况下，您可以使用

momentjs

或javascript的

Date（）

我还使用了带v槽的全局过滤器：

<v-data-table :headers="headers" :items="logs">
  <template v-slot:item.createdOn="{ item }">
    <span>{{ item.createdOn | myGlobalDateFilter }}</span>
  </template>
</v-data-table>

{{item.createdOn | myGlobalDateFilter}}

您想如何设置格式？您好@Boussadjra Brahim我现在可以看到“2019-09-14T17:03:24.3949548”格式。我想把它定为“2019-09-14凌晨3:24”。有没有一种方法可以像角形管道一样完成？我不知道我能做到。非常感谢@Boussadjra Brahim您可能有输入错误，我需要使用单数item.createdOn作为v-slot属性，复数items.createdOn不起作用。对我来说，有一个问题：如果我通过'2020-07-01'，它将被渲染为“1.7.2020，02:00:00”，这通常不是您想要的。Javascript将给定的值作为UTC，并以用户的偏移量显示。@MathiasF我认为问题出在您的区域设置上，我用给定的输入回答了问题

2019-09-14T17…

我建议问一个更详细的新问题，确切地说是我需要的，谢谢；）是的-很棒的工作@Skilleyleny！节省了我两个小时。为了更通用的“自定义每一列”方法，`{{formatCell（value）}}`

<v-data-table :headers="headers" :items="logs">
  <template v-slot:item.createdOn="{ item }">
    <span>{{ item.createdOn | myGlobalDateFilter }}</span>
  </template>
</v-data-table>