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

举报
彭世瑜 发表于 2021/08/13 22:43:03 2021/08/13
【摘要】 版本号 "vue": "2.6.10" "element-ui": "2.13.0" 12 代码如下 <template> <el-autocomplete v-model="keywords" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" :trigger-on-focu...

版本号

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

  
 

代码如下

<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>

  
 

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

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

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

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。