Vuetify <v-select>组件与其可选内容之间的巨大差距

Question

为什么选择框与其可选内容之间的距离如此之大？

我正在Laravel 7的VueJS组件中使用Vuetify。

<template>
  <v-app class="container">
    <v-data-table
      hide-default-header
      hide-default-footer
      :headers="headers"
      :items="items"
      :items-per-page="filter.items_per_page"
      @click:row="getData"
      no-data-text="No data."
      dense
      style="background: transparent"
    >
      <template
        v-slot:footer
        v-if="items.length"
      >
          <v-row no-gutters>
            <v-col cols="2">
              <v-select
                :items=[10,50,100]
                v-model="filter.items_per_page"
                @change="onPageChange(1)"
                label="Rows per page"
                outlined
                dense
              ></v-select>
            </v-col>
          </v-row>
      </template>
    </v-data-table>
  </v-app>
</template>

===编辑===

Vuetify变量的加载方式如下：

resources/sass/app.scss

@import '~vuetify/dist/vuetify.min.css';
@import '~@mdi/font/css/materialdesignicons.min.css';