el-autocomplete绑定对象数组
时间: 2023-08-03 11:05:03 浏览: 51
对于el-autocomplete,你可以通过v-model绑定一个对象数组,以实现自动完成的功能。首先,你需要设置一个对象数组,其中每个对象包含一个value属性,用于存储选项的值。然后,将v-model绑定到一个选项对象上,以便在用户进行选择时更新绑定的值。
下面是一个示例代码:
```html
<template>
<div>
<el-autocomplete
v-model="selectedOption"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect"
>
<template slot-scope="{ item }">
<div class="item">{{ item.value }}</div>
</template>
</el-autocomplete>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: null,
options: [
{ value: 'Option 1' },
{ value: 'Option 2' },
{ value: 'Option 3' },
// ...
],
};
},
methods: {
querySearch(queryString, cb) {
// 在这里你可以根据输入的内容进行筛选,返回匹配的选项数组
const results = queryString
? this.options.filter((option) => option.value.toLowerCase().includes(queryString.toLowerCase()))
: this.options;
cb(results);
},
handleSelect(item) {
// 处理选择项的逻辑
console.log('Selected:', item);
},
},
};
</script>
```
在上面的示例中,`selectedOption`就是绑定的对象数组中的选项。`options`是所有可选的选项数组。`querySearch`方法用于根据输入的内容进行筛选,返回匹配的选项数组。`handleSelect`方法用于处理选择项的逻辑,你可以在其中执行你需要的操作。
希望以上信息对你有所帮助!如果还有其他问题,请随时提问。