今天写vue前端需要一个搜索框,在下拉列表框显示搜索到数据,搜索半天找到了AutoComplete这个组件,完美解决问题,下面说一下这个组件的使用。
<AutoComplete icon="ios-search" v-model="value1" :data="data1" :filter-method="filterMethod"
placeholder="输入教师搜索" style="width:350px">
</AutoComplete>
export default {
data() {
return {
value1: '',
data1: ['陈海峰', '陆晗', '王怀军'],
value2: '',
data2: ['计算机一级', '动物学', '马克思']
}
},
methods:{
filterMethod (value, option) {
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1
}
}
}
</script>
<style>
</style>
其中的参数 value 绑定的值,可使用 v-model 双向绑定
data 自动完成的数据源
用于绑定显示数据,以下为效果图