Vue.js 将自定义部分添加到 vautocomplete 下拉列表

发布于11月24日

我使用的是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>

推荐答案

你可以使用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

Edit for V1.1.0+:这些插槽在v-autocomplete和v-combobox中可用，因为它们继承自v-select.