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

Question

目标：

我打算将自定义搜索添加到我的v-data-table ，该v-data-table以每列为基础进行过滤。 例如，如果我有桌子

ID | Name | Age

我想在Name和Age标题中添加一个v-text-field以启用对这两列的自定义过滤。

当前设置：

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

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

问题：

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

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

Answer 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
}

示例代码笔