我尝试使用 el-autocomplete
具有最简单版本的标签:an Array
由回调函数返回( JSFiddle version )。
Vue.component('button-counter', {
data: function() {
return {
selectdusers: [],
user: ''
}
},
template: '<el-container> <el-container style="margin-left: 15px; width: 150px"> <el-autocomplete class="inline-input" v-model="user" :fetch-suggestions="filterUsers" placeholder="add user" @select="handleSelect" ></el-autocomplete> <el-button type="info" icon="el-icon-plus" click="addUser(user)">Add</el-button> </el-container> </el-container>',
methods: {
addUser(user) {
this.selectedUsers.push(user)
this.user = ''
},
filterUsers(user, cb) {
console.log(user)
cb(['qqq', 'zzz'])
//return this.allusers.filter(x => _.includes(x.f+x.t, user))
},
handleSelect() {}
},
})
new Vue({
el: '#components-demo'
})
@import url("//unpkg.com/element-ui@2.4.8/lib/theme-chalk/index.css");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.7/index.js"></script>
<div id="components-demo">
<button-counter></button-counter>
</div>
尽管 DevTools 显示 <ElAutocompleteSuggestions>
中的预期元素,但建议框在视觉上是空的。 → data
→ suggestions
最佳答案
要使用数组而不是对象,可以在自动完成 block 中使用槽
<el-autocomplete ...>
<template slot-scope="{ item }">
<div class="item">{{ item }}</div>
</template>
</el-autocomplete>
关于javascript - 可以在 element-ui el-autocomplete 回调中传递数组吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52590267/