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>

如果数据表有很多列，浏览器宽度不大（尝试~1300px甚至~600px），我们就无法看到它的所有内容。

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

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

Answer 1

看起来vuetify CSS中可能存在一个小错误，他们的layout课程对表格的响应性不好，因为它是灵活的。

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

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

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

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

1 个答案: