web-dev-qa-db-fra.com

Comment obtenir une table de données vuetify pour couvrir toute la largeur d'un conteneur lorsqu'il se trouve à l'intérieur d'une carte?

J'ai une table de données Vuetify qui est imbriquée dans une carte virtuelle afin que je puisse activer une recherche en ligne sur la table de données, mais cela la fait rétrécir et n'occuper qu'une petite quantité du conteneur global alors qu'elle se remplissait le conteneur entier lorsqu'il n'est pas imbriqué dans la v-card.

J'ai reproduit un exemple minimal de cela sur codepen à https://codepen.io/bigtunacan/project/editor/XGRpVL

Le principal sujet de préoccupation est cependant ici.

      <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

À la place du <template>, enveloppez la carte dans un <v-layout child-flex> ainsi:

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

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

child-flex est une classe qui donne à ses enfants (dans ce cas juste la carte) la règle css flex: 1 1 auto, les faisant grandir pour remplir l'espace disponible.

15
Kael Watts-Deuchar