-1

目標：

カスタム検索をv-data-table列ごとにどのフィルターに追加するかを計画しています。たとえば、テーブルがある場合

ID | Name | Age

andヘッダーに を追加して、これら 2 つの列でカスタム フィルタリングを有効v-text-fieldにしたいと考えています。NameAge

現在のセットアップ:

v-data-tableこれは、テンプレートなどを追加することで簡単に実現できます。

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

問題：

このソリューションは機能しますが、まったく見栄えがよくありません。
これはcodepen での外観 です。明らかにわかるように、フォントはデフォルトのヘッダーよりも大きく、「ソート矢印」は 1 行下に移動しています。

今、カスタム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 に答える