Vue.js 我们如何使用vuetify数据表按照屏幕截图进行设计

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

进口{
国家,，
Vue，
组成部分，
道具
行动，
看,，
}来自“nuxt属性装饰器”
@组件（{}）
导出默认类LeavePlanner扩展Vue{
punchInOutHeaders:数组=[
{
文本：“序号”，
对齐：“左”，
值：“sno”，
},
{
文本：“员工信息”，
对齐：“左”，
值：'emp_info'，
},
{
文本：“”，
对齐：“左”，
值：“持续时间\字段”，
},
]
punchInOutData:数组=[
{
sno:1，
emp_信息：{
名称：“Áshish Sharma”，
员工id:'ATC04904'，
部门：'销售'，
职务：'客户经理'，
},
持续时间字段：{
银泰：{
字段名称：“及时”，
项目：['10:45 AM'、'12:00 PM'、'10:45 AM'、'10:45 AM']，
},
},
},
{
sno:2，
emp_信息：{
名称：“Goutham Moka”，
员工id:'ATC04904'，
部门：'销售'，
职务：'客户经理'，
},
},
{
sno:3，
emp_信息：{
名称：“Lavraju Allu”，
员工id:'ATC04905'，
部门:"发展",，
职务：“软件工程师”，
},
},
]
punchdate_项：数组=[
{name:'02 Feb 2020'，id:1}，
{name:'04 Feb 2020'，id:2}，
{姓名：“2020年2月5日”，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}，
{姓名：'2020年2月10日'，id:8}，
{姓名：'2020年2月11日'，id:9}，
{姓名：'2020年2月12日'，id:10}，
{姓名：'2020年2月13日'，id:11}，
]
异步创建（）{
log（'locations\u items:'，this.punchdate\u items）
this.punchdate_items.map（（项目：任意，索引：编号）=>{
设formatObj={
text:item.name，
对齐：'居中'，
值：item.name，
可排序：false，
}
this.punchInOutHeaders.push（formatObj）/[…this.showLocations，formatObj]
})
}
}

您目前的方法是什么？我是通过使用v-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>