web-dev-qa-db-ja.com

Vuetifyデータテーブルを取得して、カード内にあるコンテナーの幅全体に広げるにはどうすればよいですか？

データテーブルでインライン検索を有効にできるように、Vカード内にネストされたVuetifyデータテーブルがありますが、これにより、データサイズが縮小し、コンテナー全体の一部しか占有しませんでした。 vカードにネストされていない場合のコンテナー全体。

https://codepen.io/bigtunacan/project/editor/XGRpVL のcodepenでこれの最小限の例を再現しました

ただし、懸念の主な領域はここです。

      <v-list-tile @click="">
        <v-list-tile-action>
          <v-icon>dashboard</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>Dashboard</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>

      <v-list-tile @click="">
        <v-list-tile-action>
          <v-icon>settings</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>Settings</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>

    </v-list>
  </v-navigation-drawer>

  <v-toolbar app fixed clipped-left>
    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <v-toolbar-title>Candy Bars</v-toolbar-title>
  </v-toolbar>

  <v-content>
    <v-container fluid fill-height>

    <template>
      <v-card>
        <v-card-title>
          Routes
          <v-spacer></v-spacer>
          <v-text-field append-icon="search" label="Search" single-line hide-details v-model="search"></v-text-field>
        </v-card-title>
        <v-data-table v-bind:headers="headers" :items="routes" :search="search" hide-actions class="elevation-1">
          <template slot="items" slot-scope="props">
            <td><router-link :to="{ name: 'route', params: {id: props.item.id}}">{{ props.item.name }}</router-link></td>
            <td>{{ props.item.agency }}</td>
          </template>
        </v-data-table>
      </v-card>
    </template>

    </v-container>
  </v-content>

  <v-footer app fixed>
    <span>&copy; 2017</span>
  </v-footer>

</v-app>
vue.jsvuejs2vuetify.js
10
bigtunacan

<template>の代わりに、次のようにカードを<v-layout child-flex>でラップします。

...
<v-content>
  <v-container fluid fill-height>

    <v-layout child-flex>
      <v-card>
        <v-card-title>
          ...

child-flexは、その子（この場合はカードのみ）にCSSルールflex: 1 1 autoを提供するクラスであり、利用可能なスペースを埋めるために成長します。

15
Kael Watts-Deuchar