使用Vuetify实现可滚动数据表格

Question

我想创建一个Vue页面，其中有两个数据表格填充了屏幕的一半（垂直方向）。每个数据表格都应该有滚动条（如果需要的话）。

我尝试了下面的标记，但是这不会将数据表格大小调整为屏幕尺寸。这里有一个CodePen示例

<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

---

如果您从v-container中移除fluid属性，我想这将是您所期望的结果。 - kuromoka

这是你需要的吗？https://codepen.io/Lawrence_Nara/pen/NLoBgL。我相信也可以使用计算属性与样式一起使用，并根据视口更改最大高度。 - nara_l

去除流体不能得到所需的结果。@kuromoka - Douglas Woods

@nara_l，添加max-height样式确实接近了，但我希望flex可以自动计算高度。我已经将两个表格都设置为md6，所以我希望它们各自占用可用高度的一半。 - Douglas Woods

当表格可以滚动时，我们将如何固定表头。 - Rushikesh

Answer 1

为了达到我需要的结果，我需要在布局上将高度设置为100vh，并在每个弹性容器上设置overflow。我已经更新了相关的CodePen代码。

<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

---

这正是我一直在寻找的。对于任何想要看到它实际运行的人，我创建了一个基于Douglas答案的CodePen。 - AnonymousAngelo

我们可以不设置 style="height: 90vh" 吗？我想设置每个视图要显示的记录数，然后滚动查看其余元素。 - Mahesh Bongani

Answer 2

在Vuetify 2中，只需设置height和fixed-header属性即可实现。虽然在文档和示例中没有找到，但是可以在simple-table示例中找到它。

- Brad Mathews

---

它将在整个表格上显示滚动条，但应仅在正文部分可见。 - Mojtaba Barari

Answer 3

尽管已经有答案，但我发现上面的答案拼写不正确。以下是正确的示例代码。

<v-responsive
         class="overflow-y-auto"
          max-height="calc(90vh - 520px)">
</v-responsive

或者

</v-data-table
>
    <template v-slot:body>
         <v-responsive
               class="overflow-y-auto"
               max-height="calc(90vh - 520px)"
          >
                <tbody>
                      <tr>
                           <td>example</td>
                           <td><strong>test example</strong></td>
                      </tr>
                </tbody>
         </v-responsive>
  </template>
</v-data-table>

- Rafael Furtado

---

如果我们设置了 body 插槽，则排序将不再起作用。文档中说：> 需要注意的是，某些插槽（例如：item/body/header）将完全接管组件的内部渲染，这将需要您重新实现选择和展开等功能。 - Alex Bitek