vuetify v-select 样式：太大

Question

是否可以降低 Vuetify 中 v-select 的高度？ 我不明白为什么这些元素这么大/这么胖……

---

我的代码是：

<template>
  <div>
    <v-select
      outline
      dense
      v-model="filtresActivites"
      :items="activitesGroupees"
      item-text="activiteNomComplet"
      item-value="activiteCode"
      multiple
    >
      <template v-slot:selection="{ item, index }">
        <span v-if="index === 0" class="deep-orange--text">{{ filtresActivites.length }} activités</span>
      </template>
    </v-select>
  </div>
</template>

“您可以像这样向 v-select 添加高度属性：”：它不起作用

我在组件的样式中添加了.v-select__selections { min-height: 30px }，它不起作用。

Answer 1

您不必在v-select 中使用outline 样式。删除它。

来自 vuetify 的图片示例：

Answer 2

您可以像这样将height 属性添加到您的v-select：

<v-select
 :items="items"
 height=50
></v-select>

如果你想改变v-select的css属性，你可以通过添加这个类来实现

.v-select__selections {
     min-height: 30px
}

min-height 默认为42px

当我们看不到您的代码时，也很难理解您的问题