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

<template>
  <v-data-table :items="items" :headers="headers">
    <template #item.date="{ item }">
      {{ item.date | formatDate }}
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, date: '2022-01-01' },
        { id: 2, date: '2022-02-01' },
        { id: 3, date: '2022-03-01' },
      ],
      headers: [
        { text: 'ID', value: 'id' },
        { text: 'Date', value: 'date' },
      ],
    };
  },
  filters: {
    formatDate(value) {
      const date = new Date(value);
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
    },
  },
};
</script>

<template>
  <v-data-table :items="items" :headers="headers">
    <template #item.date="{ item }">
      {{ formatDate(item.date) }}
    </template>
  </v-data-table>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      items: [
        { id: 1, date: '2022-01-01' },
        { id: 2, date: '2022-02-01' },
        { id: 3, date: '2022-03-01' },
      ],
      headers: [
        { text: 'ID', value: 'id' },
        { text: 'Date', value: 'date' },
      ],
    };
  },
  methods: {
    formatDate(date) {
      return moment(date).format('YYYY年MM月DD日');
    },
  },
};
</script>