vform-element

自动补全

您可以根据当前输入的内容获取对应的输入建议。

基础使用

Autodcomplete 组件提供输入建议。

fetchSuggestions 属性为返回建议输入的方法。

在此示例中， querySearch(queryString, cb) 方法通过 cb(data) 给 Autocomplete 组件返回建议。

自定义模板

自定义如何显示输入建议。

使用 scoped slot 自定义输入建议。 在这个范围中，你可以使用 item 键来访问当前输入建议对象。

改变

vue3的scope-slot与slot被统一了

远程搜索

从服务端搜索数据。

配置选项

AutoComplete 完全继承了 ElInput的属性 您可以从下面的链接里找到相关文档

如果您使用了typescript，我们提供了类型提示,配置一个AutoComplete输入框大概有如下可选项

type AutocompleteProps = InputProps & VueProps<typeof ElAutocomplete>
export interface VAutoCompleteItem<
T extends object, 
Key extends DeepKey<T> = DeepKey<T>
> extends VBaseItem<T, Key> {
  props?: VPropDef<T, AutocompleteProps>
  slots?: {
    prefix?: JSX.Element | { (): JSX.Element }
    suffix?: JSX.Element | { (): JSX.Element }
    prepend?: JSX.Element | { (): JSX.Element | string }
    append?: JSX.Element | { (): JSX.Element | string }
    default?: { (scope: { item: any }): JSX.Element | JSX.Element[] | string }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14