将 `v-text-field header` 添加到 `v-data-table` 标题以进行基于列的搜索答案

【问题标题】：Add a `v-text-field header` to `v-data-table` header for column based search将 `v-text-field header` 添加到 `v-data-table` 标题以进行基于列的搜索
【发布时间】：2021-02-15 23:28:33
【问题描述】：

目标：

我计划将自定义搜索添加到我的v-data-table，它按列进行过滤。例如，如果我有桌子

ID | Name | Age

我想将v-text-field 添加到Name 和Age 标头，以启用对这两列的自定义过滤。

当前设置：

这可以通过像这样向v-data-table 添加模板来轻松实现

<template v-slot:header.name="{ header }">
    <v-text-field
        :label="header.text"
    >
    </v-text-field>
</template>

问题：

这个解决方案确实有效，但看起来一点也不漂亮
这就是它在 codepen 中的样子 可以清楚地看到，字体比默认标题大，“排序箭头”向下移动了一行。

现在我正在寻找一种解决方案，如何使自定义 v-text-field 标头看起来像其他默认标头。
我的假设是我必须使用 css 进行样式设置，但我不确定。
任何指向正确方向的指针将不胜感激！ ☺

【问题讨论】：

标签： vue.js header vuetify.js v-data-table

【解决方案1】：

这个糟糕的 CSS 会起作用：

thead.v-data-table-header > tr > th > div{
  display:inline-block;
  width:90%;
}

thead.v-data-table-header > tr > th > div.v-input label{
  font-size:12px
}

Example codepen

【讨论】：