如何格式化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

---

你想以什么格式进行排版？ - Boussadjra Brahim

嗨@Boussadjra Brahim，我现在得到了“2019-09-14T17:03:24.3949548”格式。我想把它变成“2019-09-14 3:24 AM”。有没有像Angular中的管道一样的方法可以做到这一点？ - Kavin404

Answer 1

你应该使用一个自定义行单元格：

<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

---

您可能打错了字，我需要使用单数的item.createdOn作为v-slot属性，复数的items.createdOn无法正常工作。 - Vox

这个答案可以通过将 <template v-slot:item.createdOn="{ item }"> 更改为 <template v-slot:[\item.createdOn`]="{ item }">` 来避免 "'v-slot'指令不支持任何修饰符"错误。请参见'v-slot'指令不支持任何修饰符。 - Beder Acosta Borges

谢谢您的评论，它可以更新为什么？ - Boussadjra Brahim

到 <template v-slot:[\item.createdOn`]="{ item }">`。 - Beder Acosta Borges

这被称为动态插槽，例如您可以执行 v-slot:[someprop]="{}"，其中 someprop 是在脚本或模板中定义的属性，表示有效插槽的字符串。 - Boussadjra Brahim

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).toFixed(2);
}

这里提供了一个沙盒以查看其实际效果： https://codesandbox.io/s/vuetify-datatable-value-formatter-jdtxj?file=/src/App.vue

编辑：

在这种特定情况下，您可以使用 momentjs 或 JavaScript 的 Date()。我已经在 codesandbox 中添加了一个 momentjs 示例。

- SneakyLenny

---

是的-干得好@SneakyLenny！省了我大约2小时。将其更改为适用于更通用的“自定义每列”方法：<template v-for="header in headers" v-slot:[``item.${header.value}``]="{ header, value }" > {{ formatCell(value) }} </template> - Richard Strickland

无论选择哪种日期格式，仍然可以在日期列上使用排序/筛选吗？即在此之后，表格是使用底层日期还是新格式化的字符串进行内部排序/筛选算法？ - niko

@niko 排序是基于给定的数据，否则您可以事先格式化数据。例如：如果数据是 4 - 2 - 1 - 3，而格式化程序会添加随机字母到格式中，则显示将按 y1 - x2 - u3 - a4 排序。如果这有意义的话。 - SneakyLenny

这也可以根据数据动态创建基于<template>的模板，比如如果您有“动态标题”，那么您可以检查标题并创建模板。非常有用，谢谢！ - specimen

Answer 3

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

<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插槽。更多信息这里。

- Alec Gerona

Answer 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'
          }],

- Okan Sari

Answer 5

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

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

- jcons