javascript - 使用 vuetify v-data-table 在一行中显示三行重复数据

Question

您可以在附图中看到两个数据表。第一个数据表在所有三行中显示相同的数据。我不需要重复的数据，所以我想删除重复的数据行并只制作一行数据。请告诉我该怎么办。大家请帮帮我。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.js"></script>
<template>
  <v-container class="container-padding">
    <v-breadcrumbs class="px-0 pt-0" large>
      <span class="breadcrumb-line rounded-pill mr-2"></span>
      <v-breadcrumbs-item class="text-h5 mr-5">Timecard</v-breadcrumbs-item>
      <span class="breadcrumb-divider rounded-pill mr-5"></span>
      <v-breadcrumbs-item class="text-h6">View</v-breadcrumbs-item>
    </v-breadcrumbs>

    <v-card>
      <v-container fluid>
        <v-row>
          <v-col cols="1">
            <v-subheader></v-subheader>
          </v-col>
          <v-col cols="2">
            <v-layout row wrap justify-space-around>
              <v-text-field v-model="calendarVal" label="Date" type="date" value="2022-02-05"></v-text-field>
            </v-layout>
          </v-col>
          <v-col cols="1">
            <v-btn @click="fetchWorkerTimeCard">enter</v-btn>
          </v-col>
        </v-row>
      </v-container>
      <v-data-table worker_time_card :headers="headers1" :items="worker_time_card"></v-data-table>
    </v-card>
    <v-card>
      <v-data-table v-if="worker_time_card.length > 0" :headers="headers2" :items="worker_time_card"></v-data-table>
    </v-card>
  </v-container>
</template>
<script>
  export default {
    data() {
      return {
        worker_time_card: [],
        calendarVal: null,
        headers1: [{
            text: 'Start Time',
            value: 'start_time'
          },
          {
            text: 'End time',
            value: 'end_time'
          },
          {
            text: 'Rest time',
            value: 'rest_time'
          },
          {
            text: 'Worked time',
            value: 'worked_time'
          },
        ],
        headers2: [{
            text: 'Project id',
            value: 'project_id'
          },
          {
            text: 'Duration',
            value: 'duration'
          },
          {
            text: 'Work log',
            value: 'work_log'
          }
        ],
      }
    },
    computed: {
      calendarDisp() {
        return this.calendarVal
      },
    },
    mounted() {
      this.calendarVal = this.getDataToday()
      this.fetchWorkerTimeCard()
    },
    methods: {
      getDataToday() {
        return (new Date().toISOString().substr(0, 10))
      },
      submit() {
        console.log(this.calendarVal)
      },
      async fetchWorkerTimeCard() {
        try {
          this.worker_time_card = []
          await this.$axios.$get('/worker_time_card', {
            params: {
              work_date: this.calendarVal
            }
          }).then(data => {
            data.time_cards.forEach(card =>
              this.worker_time_card.push({
                start_time: data.start_time,
                end_time: data.end_time,
                rest_time: data.rest_time,
                worked_time: data.worked_time,
                duration: card.duration,
                work_log: card.work_log,
                project_id: card.project_id,
              })
            )
          })
        } catch (error) {
          console.log(error)
          this.worker_time_card = []
        }
      },
    },
  }
</script>

本项目使用vuetify框架，下面的代码是“v-data-table”和“v-card”组件的一部分。也许如果这部分修复得好，可以制作只有一行和标题的数据表，但可能还需要修复 Javascript 部分。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.js"></script>
<v-card>
  <v-container fluid>
    <v-row>
      <v-col cols="1">
        <v-subheader></v-subheader>
      </v-col>
      <v-col cols="2">
        <v-layout row wrap justify-space-around>
          <v-text-field v-model="calendarVal" label="Date" type="date" value="2022-02-05"></v-text-field>
        </v-layout>
      </v-col>
      <v-col cols="1">
        <v-btn @click="fetchWorkerTimeCard">enter</v-btn>
      </v-col>
    </v-row>
  </v-container>
  <v-data-table worker_time_card :headers="headers1" :items="worker_time_card"></v-data-table>
</v-card>
<v-card>
  <v-data-table v-if="worker_time_card.length > 0" :headers="headers2" :items="worker_time_card"></v-data-table>
</v-card>