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

【问题标题】：How to format Vuetify data table date column?如何格式化Vuetify数据表日期列？
【发布时间】：2020-01-16 14:02:47
【问题描述】：

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

【问题讨论】：

你想怎么格式化？
嗨@Boussadjra Brahim 我现在得到“2019-09-14T17:03:24.3949548”格式。我想让它成为“2019-09-14 3:24 AM”。有没有办法像有角度的管道一样做到这一点？

标签： javascript html vue.js nuxt.js vuetify.js

【解决方案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>

【讨论】：

你可能打错了，我需要使用单数 item.createdOn 作为 v-slot 属性，复数 items.createdOn 不起作用。
对我来说有一个问题：如果我通过 '2020-07-01'，它会呈现为“1.7.2020, 02:00:00”，这通常不是您想要的。 Javascript 将给定的值作为 UTC 并以用户的偏移量显示。
@MathiasF 我认为问题出在您的语言环境，我用给定的输入 2019-09-14T17... 回答了这个问题，我建议您提出一个新问题并提供更多详细信息
可以通过将<template v-slot:item.createdOn="{ item }"> 更改为<template v-slot:[`item.createdOn`]="{ item }"> 来更新此答案以避免“'v-slot' 指令不支持任何修饰符”错误。见'v-slot' directive doesn't support any modifier。
感谢您的评论，可以更新成什么？

【解决方案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！节省了我 2 小时。让它适用于更通用的“自定义每一列”方法：` `
可以在日期列上使用仍然排序/过滤，而不管之后选择的格式？即，该表之后是否使用基础日期或新格式化的字符串作为其内部排序/过滤算法？
@niko 排序基于给定的数据，否则您可以事先格式化数据。示例：如果数据为 4 - 2 - 1 - 3 并且格式化程序会在格式中添加随机字母，则显示排序为 y1 - x2 - u3 - a4。如果这有意义的话。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

在数据表组件Datatable.vue中

<template v-for="slot in slots" v-slot:[`item.${slot.slotName}`]="{ item }">
  <slot :name="slot.slotName" :variable="item"></slot>
</template>

export default {
props:
slots:{
  type:Array,
  default:null
},

和父组件

<Datatable
 :headers="headers"
  :items="stokhareketleri"
  :title="title"
  :slots="slots">
<template v-slot:column_name="{ variable }">
  <v-chip
        color="green"
        dark
      >
      {{variable.column_name}}
      </v-chip>
</template>
  </Datatable>


data () {
      return {
        slots:[{ 
          Id: 1, slotName: 'column_name'
          }],

【讨论】：

【解决方案5】：

如果您想要一个更简单的解决方案或至少一个您可以格式化其他列的解决方案：

<v-data-table :headers="headers" :items="logs">
  <template v-slot:body="{ items }">
    <tbody>
      <tr v-for="item in items" :key="logs.id">
        <td> {{ new Date(item.createdOn).toLocaleString() }} </td>
        ...
      </tr>
    </tbody>
  </template>
</v-data-table>

诀窍是使用v-data-table 的body 插槽。更多信息here.

【讨论】：