Vuetify

v-autocomplete 组件提供简单灵活的输入提示功能。当搜索大量数据甚至从 API 中动态请求信息时是十分有用的。

自动完成组件扩展了v-select并为其增加了过滤项目的能力。

Options

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

轻松绑定动态数据并创造独特的体验。v-autocomplete 的扩展的支持列表使得对输入的各个方面进行调优变得很容易。

propfilter可以用来过滤每个项目,并带有自定义逻辑。在这个例子中,我们按名称过滤项目

您可以使用 dense 属性来降低自动完成高度和列表项的最大高度。

利用插槽的强大功能,您可以自定义选择的可视输出。在本例中,我们为纸片和列表项添加了一个配置文件图片。

有时您需要根据搜索查询从外部加载数据。 使用 autocomplete 属性时,请使用带有 .sync 修饰符的 search-input 属性。 我们还利用了新的 cache-items 属性。 这将保留已传递给 items 属性的所有物品的唯一列表,并且在使用异步属性和 multiple 属性时是 REQUIRED 的。

v-autocomplete 组件非常灵活,几乎可以适应任何用例。 为 no-data, itemselection 插槽创建自定义显示,以提供独特的用户体验。 使用 slots 可使您轻松自定义应用程序所需的外观。

结合使用 v-autocomplete 插槽和过渡,您可以创建一个时尚的可切换自动完成字段,例如此状态选择器。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!