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

Posted 2023-02-22

【中文标题】更改 vuetify 数据表中的日期格式

【英文标题】：Change format of date in vuetify's data-table

【发布时间】：2020-02-04 08:08:54

【问题描述】：

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

因为现在我不能像这个值一样使用它：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"
        
      ]
    ;
  ,

这是我现在的桌子

【问题讨论】：

这能回答你的问题吗？ How to format Vuetify data table date column?

【参考方案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")