ElementUI组件模板之自动完成el-autocomplete
【摘要】 版本号
"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)