el-autocomplete数据回显
时间: 2023-09-08 17:14:35 浏览: 298
【JavaScript源代码】Element-ui 自带的两种远程搜索(模糊查询)用法讲解.docx
el-autocomplete 组件提供了 `value-key` 属性用于指定选项中用于显示文本的键名,默认为 `value`。因此,如果要实现数据回显,可以将选中项的文本赋值给绑定的变量,并在 el-autocomplete 上设置 `v-model` 绑定该变量。
例如,假设我们有以下数据:
```
options: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
```
我们想要实现如下功能:当用户选择一个选项后,将选中的名称回显到输入框中。可以像这样写 el-autocomplete 组件:
```
<el-autocomplete
v-model="selectedOptionName"
:fetch-suggestions="querySearch"
:value-key="'name'"
>
</el-autocomplete>
```
其中,`selectedOptionName` 是绑定的变量,`querySearch` 是用于获取选项列表的方法。在 `querySearch` 方法中,我们需要返回一个 Promise 对象,该对象应该 resolve 一个包含选项列表的数组。当用户选择一个选项时,组件会将选项的 `name` 属性赋值给 `selectedOptionName` 变量,进而实现数据回显。
阅读全文