在Vuetify数据表的thead和tbody之间添加行

Question

我试图在我的vuetify数据表组件内的thead和tbody之间插入一行（代码中的“我的自定义行”）

这是我的模板代码部分：

<v-data-table
    v-model="selected"
    item-key="Serial"
    show-select
    must-sort
    :headers="eventHeaders"
    :items="eventRows"
    :rows-per-page-items="rowsPerPageItems"
    :rows-per-page-text="rowsPerPageText"
    :pagination.sync="pagination"
    :search="searchPattern"
    class="elevation-3"
  >
    <template slot="headers" slot-scope="props">
      <div>
        <tr class="blue-grey lighten-5">
          <th>
            <v-checkbox
              :input-value="props.all"
              :indeterminate="props.indeterminate"
              color="light-blue darken-3"
              hide-details
              @click.stop="toggleAll"
            />
          </th>
          <th
            v-for="header in props.headers"
            :key="header.text"
            class="font-weight-light subheading"
            :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
            @click="changeSort(header.value)"
          >
            <v-icon small>arrow_upward</v-icon>
            {{ header.text }}
          </th>
        </tr>
        <div class="customRow" :style="{height:'20px'}">
          <div :style="{width: tableFullwidth,height:'20px'}">my custom row</div>
        </div>
      </div>
    </template>
    <template slot="items" slot-scope="props">
      <tr :key="props.index" :class="{ 'blue-grey lighten-4': props.selected }" :active="props.selected" @click="props.selected = !props.selected">
        <td>
          <v-checkbox
            :input-value="props.selected"
            color="blue-grey darken-1"
            hide-details
          />
        </td>
        <td v-for="(header,index) in eventHeaders" :key="index" :class="header.alignCells">
          <div :style="{display:'block',width:header.width}">{{ props.item[header.text] }}</div>
        </td>
      </tr>
    </template>
  </v-data-table>

此实现显示了广告下方的行，但tbody行中第一列的宽度变为'tableFullwidth'

p.s。 customRow CSS：

  width: calc(100% - 30px);
  position:absolute;
  overflow: scroll hidden;
  margin-left:-1px;
  margin-top:-20px;

p.p.s。这是我对上滚动条的实现，将通过滚动eventLstener与默认表滚动条进行同步