добавить пользовательскую часть в выпадающее меню v-autocomplete - PullRequest
Новая
       9

добавить пользовательскую часть в выпадающее меню v-autocomplete

0 голосов
/ 23 ноября 2018

Я использую компонент v-autocomplete vuetify, и я хотел бы добавить настраиваемую деталь в выпадающий список (отмеченный красной стрелкой на этом снимке экрана: 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 Ответ

0 голосов
/ 23 ноября 2018

Вы можете использовать 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 и Append в документации Vuetify

Редактировать для V1.1.0 + : эти слоты доступны в v-autocomplete и v-combobox, поскольку они наследуются от v-select.

...