使用 Vuetify 的可滚动数据表

Question

我想创建一个具有两个数据表的 vue 页面，这些数据表占据了屏幕的一半（垂直）。如果需要，每个数据表都应该有一个滚动条。

我已经尝试了下面的标记，但这不会将数据表的大小调整为屏幕大小。这是一个 代码笔示例

<div id="app">
    <v-app id="inspire">
    <v-container fluid grid-list-md fill-height>
      <v-layout column>
        <v-flex md6>
          <v-data-table
            :headers="headers"
            :items="desserts"
            hide-actions
            class="elevation-1"
          >
            <template slot="items" slot-scope="props">
              <td>{{ props.item.name }}</td>
              <td class="text-xs-right">{{ props.item.calories }}</td>
              <td class="text-xs-right">{{ props.item.fat }}</td>
              <td class="text-xs-right">{{ props.item.carbs }}</td>
              <td class="text-xs-right">{{ props.item.protein }}</td>
              <td class="text-xs-right">{{ props.item.iron }}</td>
            </template>
          </v-data-table>
          </v-flex>
        <v-flex md6>
          <div>
          <v-data-table
            :headers="headers"
            :items="desserts"
            hide-actions
            class="elevation-1"
          >
            <template slot="items" slot-scope="props">
              <td>{{ props.item.name }}</td>
              <td class="text-xs-right">{{ props.item.calories }}</td>
              <td class="text-xs-right">{{ props.item.fat }}</td>
              <td class="text-xs-right">{{ props.item.carbs }}</td>
              <td class="text-xs-right">{{ props.item.protein }}</td>
              <td class="text-xs-right">{{ props.item.iron }}</td>
            </template>
          </v-data-table>
          </div>
        </v-flex>
      </v-layout>
    </v-container>
    </v-app>
</div>

原文由 Douglas Woods 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为了获得结果，我需要在布局上将高度设置为 100vh，并在每个 flex 上设置溢出。我已经更新了有问题的代码笔

<div id="app">
<v-app id="inspire">
 <v-container>
  <v-layout column style="height: 90vh">       <--- added height
    <v-flex md6 style="overflow: auto">        <--- added overflow
      <v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </template>
      </v-data-table>
      </v-flex>
    <v-flex md6 style="overflow: auto">        <--- added overflow
      <v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </template>
      </v-data-table>
    </v-flex>
  </v-layout>
 </v-container>
</v-app>

原文由 Douglas Woods 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 Vuetify 2 中，只需设置 height 和 fixed-header 道具。不在文档或示例中，而是在简单表示例中找到。

原文由 Brad Mathews 发布，翻译遵循 CC BY-SA 4.0 许可协议