Vuetify：在 v-autocomplete 中指定列表项的高度

Question

我使用v-autocomplete 和custom slot 来显示结果：

<v-autocomplete :items=searchResults :loading=loading :search-input.sync="query" hide-no-data label="Entreprise, SIREN..." append-icon="search" v-model="selected" three-line >
  <template v-slot:item="{ item }">
    <v-list-tile-content>
      <v-list-tile-title v-text="item.text"></v-list-tile-title>
      <v-list-tile-sub-title v-text="item.value"></v-list-tile-sub-title>
      >
      <v-list-tile-sub-title> Third line of list item</v-list-tile-sub-title>
    </v-list-tile-content>
    <CompanyListItem :company=item :loading=false />
  </template>
</v-autocomplete>

不幸的是，生成的列表项看起来是垂直压缩的，如 codepen 所示。

是否可以将two-line 或three-line 添加到基础列表中以便能够拥有“更高”的列表项？将这些属性添加到 <v-autocomplete> 不起作用。

Answer 1

将列表图块的高度更改为 auto 因为 CSS 属性对我有用。

.v-autocomplete__content .v-list__tile{
  height: auto;
}

two-line 或 three-line 是 <v-list></v-list> 的道具，用于增加 list-tile 高度。但这里是 v-slot:item 的内容 默认包装在<v-list></v-list> 中（当我在浏览器检查器中检查元素时）。