我正在使用 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
为 V1.1.0+ 编辑:这些插槽在 v-autocomplete
和 v-combobox
中可用,因为它们继承自 v-选择
。
关于javascript - 将自定义部分添加到 v-autocomplete 下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53449980/