使用Vuetify 3和制表器javascript库来生成表。我可能有一个简单的请求，我想在一个组件中包含一个可滚动的表，它占用了可见浏览器屏幕的空间。我现在只得到一行中的一小部分，没有向下滚动的能力：

我检查了制表器的高度选项，但这不能给我一个可滚动的列表。这是表组件：

<div id="example-table"></div>
</template>
<script>
import { TabulatorFull as Tabulator } from 'tabulator-tables'; // import Tabulator library
export default {
  name: 'TabulatorView',
  data() {
    return {
      tabulator: null, // variable to hold your table
      tabledata: [],
  mounted() {
    this.tabledata = [];
    for (let i = 0; i < 55; i += 1) {
      this.tabledata.push({
        id: i,
        name: i,
        age: i,
        gender: 'male',
        rating: 50,
        col: 'red',
    this.tabulator = new Tabulator('#example-table', {
      data: this.tabledata,
      columns: [
        { title: 'Name', field: 'name' },
        { title: 'Gender', field: 'gender' },
        { title: 'Rating', field: 'rating' },
        { title: 'Favourite Color', field: 'col' },
      layout: 'fitColumns',
      // autoColumns: true,
      // layout: 'fitData',
      // pagination: true,
      // height: '411px',
      // width: '50%',
      // paginationSize: 50,
      // paginationSizeSelector: [10, 25, 50, 100],
</script>

这是App.vue组件。我在玩v-床单和v-卡，但这可能不是最好的处理方法。

    <v-card
    class="d-flex row justify-center pa-2"
    outlined
    stretch
    <v-sheet
      elevation="5"
      height="1050"
      width="1250"
    <v-card-header>
        <div class="text-overline mb-1">
          OVERLINE
        <div class="text-h6 mb-1">
          Headline
        <div class="text-caption">Greyhound divisely hello coldly fonwderfully</div>
    </v-card-header>
    <Tabulator />
     <v-card-actions>
      <v-btn
        variant="outlined"
        rounded
        Button
      </v-btn>
    </v-card-actions>
    </v-sheet>
  </v-card>
     <Miserables />
  </v-main>
  <v-footer app>
    <!-- -->
  </v-footer>
</v-app>
</template>
  [1]: https://i.stack.imgur.com/d66pO.png