将自定义零件添加到v-autocomplete下拉列表中

时间:2018-11-23 16:17:54

标签: javascript html5 vue.js autocomplete vuetify.js

我正在使用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>

2 个答案:

答案 0 :(得分:2)

您可以使用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 +版进行编辑:{@ 1}和v-autocomplete中的这些位置是从v-combobox继承的。

答案 1 :(得分:0)

只是稍微修改了这个答案。我们可以使用“v-list-item-content”代替“v-list-tile-content”,因为前者会为 2.3.x 和 2.4.x 版本提供控制台错误。 @toodoo