时间戳

首页 > 解决方案 > Vuetify：在 v-autocomplete 中指定列表项的高度

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

问题描述

我正在使用v-autocomplete带有自定义插槽的 a来显示结果：

<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>不起作用。

标签： vue.jsvuetify.js

解决方案

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

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

两行或三行<v-list></v-list>是增加列表平铺高度的道具。但这里v-slot:item的内容默认包含在<v-list></v-list>（当我在浏览器检查器中检查元素时）。

推荐阅读