如何移除Vuetify中v-select组件选中区域与下拉箭头之间的空白

解决方案 #

你可以通过自定义样式覆盖Vuetify的默认内置样式实现需求，具体操作如下：

• 给你的v-select组件添加一个自定义类名方便精准控制样式，比如加class="custom-select"
• 对应添加以下CSS样式即可：

如果是Vue2环境：

::v-deep .custom-select .v-select__selection {
  margin-right: 4px !important;
}
::v-deep .custom-select .v-input__append-inner {
  padding-left: 0 !important;
}

如果是Vue3环境：

:deep(.custom-select .v-select__selection) {
  margin-right: 4px !important;
}
:deep(.custom-select .v-input__append-inner) {
  padding-left: 0 !important;
}

修改后的组件代码示例：

<v-select
  class="custom-select"
  v-model="select"
  :items="items"
  item-text="state"
  return-object
  single-line
></v-select>

实现原理是Vuetify默认给选中内容区域加了较大的右侧外边距，同时下拉箭头的容器有默认左侧内边距，调整这两个值就能消除中间的多余空白，你可以根据自己的实际视觉需求调整margin-right的数值适配设计规范。

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