date - 表排序日期不正确

Question

预期: 我将从返回的 API 中获取日期时间字符串。此值 "2019-08-15T15:58:14.597Z" 应在表格中显示为 `DD-MM-YYYY HH:MM。 Vuetify 自带数据表组件，可以对数据进行升序和降序排序。我还想对日期使用此功能，使其按升序和降序排序。

小问题:来自 API 的日期应该保存并以另一种“样式”显示在表格中，但排序功能使用真实的日期对象。

我当前的代码:

<template>
    <v-content class="mt-12 ml-12">
        <h1 class="font-weight-black display-3">Servers</h1>

        <v-data-table
            class="elevation-1"
            :headers="headers"
            :items="columns"
            :items-per-page="15"
        >
        </v-data-table>

        <ul id="example-1">
            <li v-for="(data, index) in columns.data" :key="index">
                {{ data.attributes }}
            </li>
        </ul>
    </v-content>
</template>

<script>
import instances from '../services/instances';

export default {
  data() {
    return {
      columns: [],
      headers: [
        { text: 'Server Name', value: 'attributes.name' },
        { text: 'Spieler', value: 'attributes.playerCount' },
        { text: 'Avg. FPS', value: 'attributes.details.rust_fps_avg' },
        { text: 'Wiped', value: 'attributes.details.rust_last_wipe' },
      ],
    };
  },
  async created() {
    const { data } = await instances.createInstance();
    this.columns = data.data;
    this.columns.forEach((entry) => {
      const { players, maxPlayers } = entry.attributes;
      entry.attributes.playerCount = `${players} / ${maxPlayers}`;
      const { rust_last_wipe } = entry.attributes.details;
      const mmmm = new Date(entry.attributes.details.rust_last_wipe);
      entry.attributes.details.rust_last_wipe = `${mmmm.getDate()}.${mmmm.getMonth() + 1}.${mmmm.getFullYear()}`;
    });
    console.log(this.columns);
  },
};
</script>

Answer 1

在this documentation有一种方法可以自定义列内容

基于它我们可以做:

<template>
  <v-content class="mt-12 ml-12">
    <h1 class="font-weight-black display-3">Servers</h1>

    <v-data-table
      class="elevation-1"
      :headers="headers"
      :items="columns"
      :items-per-page="15"
    >
      <template v-slot:item.attributes.details.rust_last_wipe="{ item }">
        <span>{{ item.attributes.details.rust_last_wipe_formatted }}</span>
      </template>
    </v-data-table>

    <ul id="example-1">
      <li v-for="(data, index) in columns.data" :key="index">
        {{ data.attributes }}
      </li>
    </ul>
  </v-content>
</template>

<script>
import instances from '../services/instances'

export default {
  data() {
    return {
      columns: [],
      headers: [
        { text: 'Server Name', value: 'attributes.name' },
        { text: 'Spieler', value: 'attributes.playerCount' },
        { text: 'Avg. FPS', value: 'attributes.details.rust_fps_avg' },
        { text: 'Wiped', value: 'attributes.details.rust_last_wipe' }
      ]
    }
  },
  async created() {
    const { data } = await instances.createInstance()
    this.columns = data.data
    this.columns.forEach(entry => {
      const { players, maxPlayers } = entry.attributes
      entry.attributes.playerCount = `${players} / ${maxPlayers}`
      const { rust_last_wipe } = entry.attributes.details
      const mmmm = new Date(entry.attributes.details.rust_last_wipe)
      entry.attributes.details.rust_last_wipe_formatted = `${mmmm.getDate()}.${mmmm.getMonth() + 1}.${mmmm.getFullYear()}`
    })
    console.log(this.columns)
  }
}
</script>