将自定义部分添加到 v-autocomplete 下拉列表

Posted 2023-02-22

【中文标题】将自定义部分添加到 v-autocomplete 下拉列表

【英文标题】：add custom part to v-autocomplete dropdown

【发布时间】：2019-04-26 06:15:06

【问题描述】：

我正在使用 vuetify 的 v-autocomplete 组件，我想将自定义部分添加到其下拉列表中（此屏幕截图上用红色箭头标记：https://prnt.sc/lm3vjc）

这是我的组件的样子，所以我想在项目顶部添加该部分：

<v-autocomplete @change='selectedSearchedCandidate' append-icon="search" :loading="loading" :filter="v => v" :items="items" :search-input.sync="search" v-model="select" flat hide-no-data hide-details return-object placeholder="Search candidates">
    <template slot="selection" slot-scope=" item, selected ">
        item.firstName item.lastName
    </template>
    <template slot="item" slot-scope=" item, tile ">
        <v-list-tile-content>
            <p class='fullName'>item.firstName item.lastName</p>
            <p class='employer'>item.employer</p>
            <p class='phoneNumber grey--text'>formattedPhoneNumber(item.phoneNumber)</p>
        </v-list-tile-content>
    </template>
</v-autocomplete>

【参考方案1】：

您可以使用prepend-item 插槽。它会在第一项之前添加您想要的任何内容。

以您的示例为例，它应该如下所示：

<v-autocomplete @change='selectedSearchedCandidate' append-icon="search" :loading="loading" :filter="v => v" :items="items" :search-input.sync="search" v-model="select" flat hide-no-data hide-details return-object placeholder="Search candidates">
    <v-list-tile
        slot="prepend-item"
        class="grey--text">
       items.length  candidates found
    </v-list-tile>
    <template slot="selection" slot-scope=" item, selected ">
        item.firstName item.lastName
    </template>
    <template slot="item" slot-scope=" item, tile ">
        <v-list-tile-content>
            <p class='fullName'>item.firstName item.lastName</p>
            <p class='employer'>item.employer</p>
            <p class='phoneNumber grey--text'>formattedPhoneNumber(item.phoneNumber)</p>
        </v-list-tile-content>
    </template>
</v-autocomplete>

Prepend and Append slot in Vuetify Documentation

---

为 V1.1.0+ 编辑：这些插槽在 v-autocomplete 和 v-combobox 中可用，因为它们继承自 v-select。

【参考方案2】：

刚刚修改了这个答案。我们可以使用“v-list-item-content”而不是“v-list-tile-content”，因为前者会在 2.3.x 和 2.4.x 版本中出现控制台错误。 @toodoo