web-dev-qa-db-ja.com

Vuetifyを使用したスクロール可能なデータテーブル

vueページを作成して、画面の半分（垂直方向）に2つのデータテーブルを配置します。必要に応じて、各データテーブルにスクロールバーを配置する必要があります。

以下のマークアップを試しましたが、これはデータテーブルのサイズを画面サイズに合わせません。これが codepenの例 です。

<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-md fill-height>
  <v-layout column>
    <v-flex md6>
      <v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </template>
      </v-data-table>
      </v-flex>
    <v-flex md6>
      <div>
      <v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </template>
      </v-data-table>
      </div>
    </v-flex>
  </v-layout>
</v-container>
</v-app>
</div>
vue.jsvuetify.js
9
Douglas Woods

結果を得るには、レイアウトで高さを100vhに設定し、各フレックスにオーバーフローを設定する必要がありました。問題のコードペンを更新しました

<div id="app">
<v-app id="inspire">
 <v-container>
  <v-layout column style="height: 90vh">       <--- added height
    <v-flex md6 style="overflow: auto">        <--- added overflow
      <v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </template>
      </v-data-table>
      </v-flex>
    <v-flex md6 style="overflow: auto">        <--- added overflow
      <v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </template>
      </v-data-table>
    </v-flex>
  </v-layout>
 </v-container>
</v-app>
1
Douglas Woods

それはすでに答えられていますが。上記の答えのスペルが間違っているようです。以下はこのための正しいサンプルコードです。

<v-responsive
         class="overflow-y-auto"
          max-height="calc(90vh - 520px)">
</v-responsive

または

</v-data-table
>
    <template v-slot:body>
         <v-responsive
               class="overflow-y-auto"
               max-height="calc(90vh - 520px)"
          >
                <tbody>
                      <tr>
                           <td>example</td>
                           <td><strong>test example</strong></td>
                      </tr>
                </tbody>
         </v-responsive>
  </template>
</v-data-table>
0
Rafael Furtado