vue 实现邮箱收件人功能！！！没想到下拉框完全可以做到

标签部分：

<el-selectstyle="width: 100%" v-model="addMail.toEmail" multiple filterable allow-create default-first-optionremote reserve-keyword :remote-method="remoteMethod" placeholder="请输入邮箱"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

data 部分：

data() {return {options: [],toEmail: [],addMail: {},contacts: [],suffix: ['@qq.com', '@163.com', '@gmail.com', '@126.com', '@yeah.net', '@vip.163.com', '@wo.cn', '@188.com', '@aliyun.com', '@vip.sina.com', '@sina.com','@sina.cn', '@sohu.com'],}
}

方法：

created() {this.getContacts()
},
methods: {getContacts() {list().then(response => {setTimeout(() => {this.loading = false;var listContacts = response.data.resultBody.records;for (let i = 0; i < listContacts.length; i++) {var contact = listContacts[i]var info = {'value':contact.email, 'label': contact.email}this.contacts.push(info)}})})},remoteMethod(query) {if (query != '') {if (query.indexOf('@') < 0) {this.options = []for (let i = 0; i < this.suffix.length; i++) {this.options.push({value: query + this.suffix[i],label: query + this.suffix[i]})}}var options = this.options.filter(item => {return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;});this.options = optionsvar contacts = this.contacts.filter(item => {return item.email.toLowerCase().indexOf(query.toLowerCase()) > -1;});if (contacts.length > 0) {this.options.push(contacts)}} else {this.options = []}}
}

看一下最终的效果：

是不是很简单呢，大家就不要再去找 vue 实现邮箱收件人的插件啦，快用这个方法！

博主扣扣：博主微信：

vue 实现邮箱收件人功能！！！没想到下拉框完全可以做到相关推荐

el-select 结合 el-checkBox 实现下拉全选+多选功能；el-select下拉框全选功能；
原文链接 el-select选择框也有多选功能,但是没有全选.故需要改造一下,el-select 结合 el-checkBox 实现下拉全选+多选功能. 代码如下,可直接复制使用: <!--* ...
GVA gin vue从后端接口获取多选下拉框数据
gin代码 func (studentApi *StudentApi) GetStuHobbies(c *gin.Context) {options := make([]map[string]stri ...
vue element-ui 实现可输入的选择下拉框
<template><el-selectv-model="value"filterable allow-create :filter-method="f ...
easyui根据select下拉框内容更新表单内容_10、表单与v-model
目标: 学会在表单类元素上使用 v-model . v-model作用:用于在表单类元素上实现双向绑定. 一.input 和 textarea <div id="app&quo ...
c mvc ajax 返回下拉框,SpringMVC之ajax+select下拉框交互常用方式
Insert title here //ajax+select三种常用交互方式 window.οnlοad=function(){ test(); } function test(){ alert(& ...
LayUi数据表格数据太多导致下拉框卡顿问题
LayUi数据表格数据太多导致下拉框卡顿问题 layui数据表格(详见官网) 根据官网示例做出数据表格示例根据官网表格展示在layui官网数据表格示例中 https://www.layui.c ...
vue html 下拉搜索框,vue实现的下拉框功能示例
本文实例讲述了vue实现的下拉框功能.分享给大家供大家参考,具体如下: www.jb51.net vue下拉框 {{x.name}}{{x.famname}} {{one}} {{oneF}} {{o ...
vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框在传统的HTM ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...

vue 实现邮箱收件人功能！！！没想到下拉框完全可以做到

vue 实现邮箱收件人功能！！！没想到下拉框完全可以做到相关推荐

最新文章

热门文章