Question

我在vue和vuetify中无法解决一个问题。我有2行，上面一行是固定大小，因为那里的数据是固定的。但是在第二行中，我有两列是数据表，数据可以很长，但是我想显示全部，而不仅仅是几行。所以我想实现，当下一行变得高于窗口的高度时，在v-flex / v-card中会出现一个滚动条。

这是codepen： https://codepen.io/anon/pen/mgKERm

<div id="app" style="height:100vh">
  <v-container fill-height>
    <v-layout column>
      <v-flex style="background-color:red" fill-height>
        <v-card class="ma-3">
          <v-data-table :items="items" hide-actions>
            <template v-slot:items="props">
              <td>{{props.item.name}}</td>
              <td>{{props.item.value}}</td>
            </template>
          </v-data-table>
        </v-card>
      </v-flex>
      <v-flex xs12>
        <v-layout row fill-height>
          <v-flex xs6 style="background-color:blue" fill-height>
            <v-card class="ma-3">
              <v-data-table :items="longerItem" hide-actions>
                <template v-slot:items="props">
              <td>{{props.item.name}}</td>
              <td>{{props.item.value}}</td>
            </template>
              </v-data-table>
            </v-card>
          </v-flex>
          <v-flex xs6 style="background-color:green" fill-height>
            <v-card class="ma-3">
              <v-data-table :items="longerItem" hide-actions>
                <template v-slot:items="props">
              <td>{{props.item.name}}</td>
              <td>{{props.item.value}}</td>
            </template>
              </v-data-table>
            </v-card>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-container>
</div>

另一个问题是它没有响应。调整大小时，第二行第二列不会位于第二行第一列之下。

有人可以帮我吗？

谢谢！

Answer 1

您可以将overflow：auto添加到代码的第14行。希望我能正确回答你的问题。（或者您也可以在CSS中添加一个类，然后使用它代替直接使用样式）

          <v-flex xs12 style="overflow:auto">

使用滚动条查看布局

1 个答案: