更改 vuetify 数据表中的日期格式

Question

有没有办法使用momentjs来更改VueJS中数据表中的日期格式？

因为现在我不能像这样使用它：moment("STRT_D").format("MMMM DD YYYY")

import moment from "moment";
export default {
  data() {
    return {
      singleSelect: false,
      selected: [],
      results: [],
      headers: [
        {
          text: "Start Date",
          sortable: false,
          value: "STRT_D"
        },
        {
          text: "Expiry Date",
          sortable: false,
          value: "LAST_D"
        },
        {
          text: "Print Date",
          sortable: false,
          value: "PrintDate"
        }
      ]
    };
  },

这是我现在的桌子

Answer 1

您可以自定义行模板

<template>
  <v-data-table
    :headers="headers"
    :items="results"
    class="elevation-1"
  >
    <template v-slot:item.STRT_D="{ item }">
      {{ formatDate(item.STRT_D) }}
    </template>
  </v-data-table>
</template>

这里我用一个方法格式化日期，你可以创建一个 Vue 过滤器来代替

methods: {
  formatDate(value) {
      return moment(value).format("MMMM DD YYYY")
  }
}