添加一个 `v-text-field header` 到 `v-data-table` header 用于基于列的搜索

Question

目标：

我计划将自定义搜索添加到我的 v-data-table 中，该搜索按列过滤。例如，如果我有 table

ID | Name | Age

我想将 v-text-field 添加到 Name 和 Age header 以启用对这两列的自定义筛选。

当前设置：

这可以很容易地通过向 v-data-table 添加模板来实现

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

问题：

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

现在我正在寻找如何使自定义 v-text-field header 看起来像其他默认 headers.
的解决方案我的假设是我必须使用 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
}

Example codepen

添加一个 `v-text-field header` 到 `v-data-table` header 用于基于列的搜索

Add a `v-text-field header` to `v-data-table` header for column based search

header

vue.js

vuetify.js

v-data-table

目标：

当前设置：

问题：