vue.js - 我们如何使用 vuetify-data-table 根据屏幕截图进行设计

Question

我使用 Vuetify-data-table 作为数据表，但我想要另一种格式的数据表。所以我在屏幕下方添加了我需要的内容。请帮我 。

    <template>
  <v-container>
    <c-data-table
      :data="punchInOutData"
      :headers="punchInOutHeaders"
      :pagination="true"
    ></c-data-table>
    <!-- <c-typography label="Your 2 Comp Off Expires in this month 4th and 18th" />
    <c-divider label="Upcoming Holidays" />
    <v-row>
      <v-col cols="6">

        <client-only><vc-calendar is-expanded /> </client-only
      ></v-col>
      <v-col cols="6">
        <c-typography
          color="#34c0be"
          label="Leave Suggestion"
          size="medium"
          weight="normal"
        />
        <div class="box">
          <c-typography label="Plan A: Apply Leave on 13 Mar 2019" />
          <hr style="color:#e7e7e7" />
          <div class="subBox">
            <v-row>
              <v-col cols="4"></v-col>
              <v-col cols="8" class="d-flex justify-space-between">
                <span>
                  <c-typography
                    label="Benefit"
                    size="small"
                    weight="light"
                    class="mb-n1 mt-n1"
                  />
                  <c-typography
                    label="4 Day"
                    size="large"
                    weight="light"
                    class="mb-n1 mt-n2"
                  />
                </span>
                <span>
                  <ul class="timeline">
                    <li><p class="font mb-2">22/3/2019</p></li>
                    <li><p class="font">24/9/2019</p></li>
                  </ul>
                </span>
                <span class="button">
                  <v-btn color="#5d409f" style="color:white">Apply Leave</v-btn>
                </span>
              </v-col>
            </v-row>
          </div>
        </div>
      </v-col>
    </v-row> -->
  </v-container>
</template>

<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',
    },
    {
      text: 'Employee Info',
      align: 'left',
      value: 'emp_info',
    },
    {
      text: '',
      align: 'left',
      value: 'duration_fields',
    },
  ]
  punchInOutData: Array<any> = [
    {
      sno: 1,
      emp_info: {
        name: 'Áshish Sharma',
        employee_id: 'ATC04904',
        department: 'Sales',
        designation: 'Account Manager',
      },
      duration_fields: {
        intime: {
          field_name: 'In Time',
          items: ['10:45 AM', '12:00 PM', '10:45 AM', '10:45 AM'],
        },
      },
    },
    {
      sno: 2,
      emp_info: {
        name: 'Goutham Moka',
        employee_id: 'ATC04904',
        department: 'Sales',
        designation: 'Account Manager',
      },
    },
    {
      sno: 3,
      emp_info: {
        name: 'Lavraju Allu',
        employee_id: 'ATC04905',
        department: 'Development',
        designation: 'Soft Ware Engineer',
      },
    },
  ]

  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() {
    console.log('locations_items: ', this.punchdate_items)
    this.punchdate_items.map((item: any, index: number) => {
      let formatObj = {
        text: item.name,
        align: 'center',
        value: item.name,
        sortable: false,
      }
      this.punchInOutHeaders.push(formatObj) //[...this.showLocations, formatObj]
    })
  }
}
</script>