ElementUI组件模板之自动完成el-autocomplete

版本号

"vue": "2.6.10"
"element-ui": "2.13.0"

  

 

  
1
  
2
 

代码如下

<template>
  <el-autocomplete v-model="keywords" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"> <template v-slot="{ item }"> <span>{{item.name}}</span> </template>
  </el-autocomplete>

</template>

<script>
export default {
  data() { return { keywords: "", list: [ { name: "张三" }, { name: "李四" } ] };
  }, methods: { querySearchAsync(queryString, cb) { let result = this.list.filter(item => { if (item.name.indexOf(queryString) > -1) { return true; } }); cb(result); }, handleSelect(item) { console.log(item); }
  }
};
</script>

<style lang="scss" scoped>
</style>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
 

参考
https://element.eleme.cn/#/zh-CN/component/input#zi-ding-yi-mo-ban

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/107426163