在“ v-data-table”标头中添加“ v-text-field标头”，以进行基于列的搜索 目标：当前设置：

问题描述

目标：

我打算将自定义搜索添加到我的import pickle class Human: def __init__(self,name): self.name = name name = open("filepath").read() h = Human(name) p = pickle.dumps(h) unpickledhuman = pickle.loads(p) 中，该搜索将按列进行过滤。例如，如果我有桌子

v-data-table

我想在ID | Name | Age 和v-text-field标头中添加Name，以在这两个列上启用自定义过滤。

当前设置：

可以通过向Age这样添加模板来轻松实现

v-data-table

问题：

此解决方案确实有效，但看起来并不完美
这是codepen中的样子

可以清楚地看到，字体比默认标题大，并且“排序箭头”已经向下移动了一行。

现在，我正在寻找一种解决方案，如何使自定义<template v-slot:header.name="{ header }"> <v-text-field :label="header.text" > </v-text-field> </template> 标题看起来像其他默认标题一样。
我的假设是我必须使用CSS进行样式设置，但不确定。
任何朝着正确方向的指针将不胜感激！ ☺

解决方法

此可怕的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