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

标签部分：

<el-select
            style="width: 100%" v-model="addMail.toEmail" multiple filterable allow-create default-first-option
            remote 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 = options

      var 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 实现邮箱收件人的插件啦，快用这个方法！

     博主扣扣：                                                                                               博主微信：