如何将Vuetify v-select组件默认40px的选项高度减半？

解决方案 #

你可以通过自定义CSS样式覆盖默认的v-select选项高度，或使用item插槽自定义选项结构来实现需求，以下是具体实现方式： #

方法1：全局/局部CSS样式覆盖

调整v-select下拉选项的列表项相关样式，将高度设置为20px（原40px的一半），同时调整内边距、行高等属性避免内容溢出：

<template>
  <v-select
    :items="countries"
    label="Select country"
    class="compact-select"
  ></v-select>
</template>

<style scoped>
/* scoped样式下需要使用深度选择器，如果是全局样式可以省略深度选择器 */
:deep(.compact-select .v-list-item) {
  min-height: 20px !important;
  padding: 2px 8px !important;
}
:deep(.compact-select .v-list-item-title) {
  line-height: 16px !important;
  font-size: 14px !important;
}
</style>

如果你使用的是Vuetify2版本，将深度选择器替换为::v-deep，对应类名调整为.v-select-list .v-list__tile即可。

方法2：使用item插槽自定义选项

如果不想修改默认样式，也可以直接通过v-select的item插槽自定义每个选项的结构，完全自主控制高度：

<v-select
  :items="countries"
  label="Select country"
>
  <template #item="{ item }">
    <div style="height: 20px; padding: 0 8px; font-size: 14px; display: flex; align-items: center">
      {{ item }}
    </div>
  </template>
</v-select>

两种方案均可以将选项高度缩减为原有高度的一半，下拉列表整体长度会同步缩小，不会占用过多页面空间。

内容的提问来源于stack exchange，提问作者Ivan Pirus