如何基于Vuetify-data-table实现指定格式的数据表格？求技术协助

Got it, let's adjust your Vuetify data table to match the desired structure. Here's the modified component code with proper formatting and the table setup you need:

Template Section #

<template>
  <v-container>
    <v-data-table
      :items="punchInOutData"
      :headers="punchInOutHeaders"
      :pagination="true"
      item-key="sno"
    >
      <!-- Custom Employee Info Column Rendering -->
      <template v-slot:item.emp_info="{ item }">
        <div class="employee-info">
          <div class="font-weight-bold">{{ item.emp_info.name }}</div>
          <div class="text-sm text-muted">{{ item.emp_info.employee_id }}</div>
          <div class="text-sm">{{ item.emp_info.department }} | {{ item.emp_info.designation }}</div>
        </div>
      </template>

      <!-- Dynamic Date Columns Rendering -->
      <template v-for="dateItem in punchdate_items" v-slot:[`item.${dateItem.name}`]="{ item }">
        <div class="text-center">
          {{ getIntimeForDate(item, dateItem.id) || '-' }}
        </div>
      </template>
    </v-data-table>
  </v-container>
</template>

Script Section (TypeScript) #

<script lang="ts">
import { State, Vue, Component, Prop, Action, Watch } from 'nuxt-property-decorator'

@Component({})
export default class LeavePlanner extends Vue {
  punchInOutHeaders: Array<any> = [
    {
      text: 'S.No',
      align: 'left',
      value: 'sno',
      sortable: true
    },
    {
      text: 'Employee Info',
      align: 'left',
      value: 'emp_info',
      sortable: false
    }
  ]

  punchInOutData: Array<any> = [
    {
      sno: 1,
      emp_info: {
        name: 'Áshish Sharma',
        employee_id: 'ATC04904',
        department: 'Sales',
        designation: 'Account Manager',
      },
      duration_entries: [
        { date_id: 1, intime: '10:45 AM' },
        { date_id: 2, intime: '12:00 PM' },
        { date_id: 3, intime: '10:45 AM' },
        { date_id: 4, intime: '10:45 AM' }
      ]
    },
    {
      sno: 2,
      emp_info: {
        name: 'Goutham Moka',
        employee_id: 'ATC04904',
        department: 'Sales',
        designation: 'Account Manager',
      },
      duration_entries: [
        { date_id: 1, intime: '09:30 AM' },
        { date_id: 3, intime: '10:15 AM' }
      ]
    },
    {
      sno: 3,
      emp_info: {
        name: 'Lavraju Allu',
        employee_id: 'ATC04905',
        department: 'Development',
        designation: 'Soft Ware Engineer',
      },
      duration_entries: [
        { date_id: 2, intime: '11:00 AM' },
        { date_id: 4, intime: '09:45 AM' },
        { date_id: 5, intime: '10:30 AM' }
      ]
    }
  ]

  punchdate_items: Array<any> = [
    { name: '02 Feb 2020', id: 1 },
    { name: '04 Feb 2020', id: 2 },
    { name: '05 Feb 2020', id: 3 },
    { name: '06 Feb 2020', id: 4 },
    { name: '07 Feb 2020', id: 5 },
    { name: '08 Feb 2020', id: 6 },
    { name: '09 Feb 2020', id: 7 },
    { name: '10 Feb 2020', id: 8 },
    { name: '11 Feb 2020', id: 9 },
    { name: '12 Feb 2020', id: 10 },
    { name: '13 Feb 2020', id: 11 }
  ]

  async created() {
    // Add dynamic date columns to headers
    this.punchdate_items.forEach(item => {
      this.punchInOutHeaders.push({
        text: item.name,
        align: 'center',
        value: item.name,
        sortable: false
      })
    })
  }

  // Helper method to get in-time for a specific date
  getIntimeForDate(item: any, dateId: number) {
    const entry = item.duration_entries?.find((entry: any) => entry.date_id === dateId)
    return entry?.intime
  }
}
</script>

<style scoped>
.employee-info {
  line-height: 1.4;
}
</style>

Key Adjustments Made: #

• Data Structure Refactor: Changed duration_fields to duration_entries for a cleaner, scalable way to map dates to in-times (using date_id to link with punchdate_items)
• Dynamic Column Rendering: Used Vuetify's slot syntax to render each date column's value dynamically, fetching the corresponding in-time via the getIntimeForDate helper
• Custom Employee Info Display: Added a slot to format employee details neatly with bold name, muted ID, and department/designation line
• Header Cleanup: Removed the empty duration_fields header and added date columns directly to the headers array in created()
• Fallback Value: Added a - for dates where no in-time entry exists, improving readability

内容的提问来源于stack exchange，提问作者Lavaraju