Question

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

我在https://codepen.io/katzkode/pen/ZbxYYG

的codepen上复制了一个最小的例子

主要关注的领域是在这里。

CREATE TRIGGER [dbo].[trgNoPlayoffForYou] ON [dbo].[tplayoffStatus]
AFTER INSERT
AS

    IF EXISTS
       (
           SELECT *
           FROM   inserted i
                  INNER JOIN dbo.tcollegeFootballTeams t 
                  ON i.TeamAbbreviation = t.TeamAbbreviation
           WHERE  t.Losses > 1
       )
    BEGIN 
           SET  @ErrorMessage = 'You may not enter the playoffs with more than 1 loss'
           Print @ErrorMessage
           Rollback Transaction
    END

Answer 1

而不是<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的类，使其增长以填充可用空间。

Answer 2

将属性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），

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

2 个答案: