컨테이너가 카드 안에 있을 때 데이터 테이블을 전체 너비로 확대하려면 어떻게 해야 합니까?

컨테이너가 카드 안에 있을 때 데이터 테이블을 전체 너비로 확대하려면 어떻게 해야 합니까?

v-card 내에 중첩된 Vuetify 데이터 테이블이 있으므로 데이터 테이블에서 인라인 검색을 사용하도록 설정할 수 있지만 v-card에 중첩되지 않은 경우 전체 컨테이너를 채우는 동안 축소되고 전체 컨테이너의 일부만 차지합니다.

https://codepen.io/bigtunacan/project/editor/XGRpVL에 있는 코드펜에 최소한의 예를 재현했습니다.

하지만 주요 관심 분야는 여기에 있다.

      <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>    

대신<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사용 가능한 공간을 채울 수 있도록 확장합니다.

재산을 추가하다width="100vw"에게v-card요소

<v-container fluid fill-height>
  <v-card width="100vw">
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      class="elevation-1"
    />
  </v-card>
</v-container>

OP의 예(약간)와 vuetify의 현재 버전(v2.3.19)에 근거해,

언급URL : https://stackoverflow.com/questions/47321316/how-to-get-a-vuetify-data-table-to-span-the-entire-width-of-a-container-when-it