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才能具有“ taller”列表项？将这些属性添加到<v-autocomplete>无效。

Answer 1

由于CSS属性对我有用，因此将列表图块的高度更改为自动。

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

两行或三行是<v-list></v-list>的用于增加列表平铺高度的道具。但是这里 v槽的内容：默认情况下，：item 包装在<v-list></v-list>中（当我在浏览器检查器中检查元素时）。

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

1 个答案: