-1

目标：

我计划v-data-table在每列的基础上将自定义搜索添加到我的过滤器中。例如，如果我有桌子

ID | Name | Age

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

当前设置：

这可以通过添加模板来轻松实现，v-data-table例如

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

问题：

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

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

4

1 回答 1

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
}

示例代码笔

于 2020-11-03T10:33:52.143 回答