如何让 vuetify 数据表在卡片内时跨越容器的整个宽度？

Posted 2023-02-22

【中文标题】如何让 vuetify 数据表在卡片内时跨越容器的整个宽度？

【英文标题】：How to get a vuetify data table to span the entire width of a container when it is inside a card?

【发布时间】：2018-04-29 11:58:39

【问题描述】：

我有一个嵌套在 v-card 中的 Vuetify 数据表，这样我就可以在数据表上启用内联搜索，但这会导致它缩小并且只占用整个容器的一小部分，而当没有嵌套在 v-card 中时，它会填满整个容器。

我已经在 https://codepen.io/bigtunacan/project/editor/XGRpVLhttps://codepen.io/bigtunacan/project/editor/XGRpVLcodepen 上复制了一个最小的例子

主要关注的领域在这里。

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

【参考方案1】：

将属性width="100vw" 添加到v-card 元素

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

基于 OP 的示例（一点点）和 vuetify 的当前版本（v2.3.19），

【参考方案2】：

而不是 <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，使它们成长以填充可用空间。

【讨论】：

这有助于修复卡片内 v-datatable 的溢出 x。谢谢！

这有效，但在 Vuetify 1.5.13 的官方文档中找不到 child-flex

这显然是 v-layout api 中的一个隐藏功能 vuetifyjs.com/en/api/v-layout