为什么vuetify数据表会拉伸整个页面而不是渲染滚动条？

Question

Codepen:https://codepen.io/frutality/pen/LQRGLv (请看它,因为某些原因插入此处的代码被切断)

<div id="app">
  <v-app>
    <v-navigation-drawer app fixed clipped v-model="drawer"></v-navigation-drawer>

    <v-toolbar app dense absolute clipped-left dark color="primary">
      <v-toolbar-title>
        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
        <span class="hidden-xs-only">Logo</span>
      </v-toolbar-title>
    </v-toolbar>

    <v-content>
      <v-container fluid fill-height>
        <v-layout>
          <div>
            <v-data-table :headers="headers" :items="titles" hide-actions disable-initial-sort class="elevation-1">
              <template slot="items" slot-scope="props">
              <td>
                {{ props.item.title }}
              </td>
              <td>{{ props.item.type }}</td>
              <td>{{ props.item.imdb_id }}</td>
              <td>{{ props.item.is_adult }}</td>
              <td>{{ props.item.start_year }}</td>
              <td>{{ props.item.end_year }}</td>
              <td>{{ props.item.duration }}</td>
              <td>{{ props.item.genres_temp }}</td>
            </template>
            </v-data-table>
            <div class="text-xs-right">
              <v-btn color="primary" class=mr-0>Refresh</v-btn>
            </div>
          </div>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

如果data-table有很多列而你的浏览器宽度不大(尝试~1300px甚至~600px),我们就看不到它的所有内容.

但是如果你去https://vuetifyjs.com/components/data-tables,你会在每个例子下看到漂亮的水平滚动条.

为什么它没有出现在我的codepen中？

Answer 1

看起来 vuetify CSS 中可能存在一个小错误，他们的layout类不能很好地适应表格的响应能力，因为它是弹性的。

添加以下内容是修复此问题的一种方法：

.layout {
  display: inline-block;
  width: 100%;
}

或者您可以添加一个额外的 div 来包含表格，而无需覆盖layout规则。