vue el-select 实现邮件系统收件人效果

在Vue中使用Element UI的el-select组件实现邮件系统收件人效果，可以通过v-model绑定选中的值，并使用el-option组件来渲染每个选项。以下是一个简单的例子：

<template>
  <el-select v-model="selectedEmails" multiple placeholder="请选择收件人">
    <el-option
      v-for="email in emails"
      :key="email"
      :label="email"
      :value="email">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedEmails: [], // 用于绑定选中的邮件地址
      emails: [ // 邮件地址列表
        'user1@example.com',
        'user2@example.com',
        'user3@example.com'
      ]
    };
  }
};
</script>

在这个例子中，el-select设置了multiple属性以支持多选，v-model绑定到selectedEmails数组，该数组将保存所有选中的邮件地址。el-option组件遍历emails数组来渲染每个邮件地址选项。用户可以选择一个或多个邮件地址，这些选中的值将存储在selectedEmails数组中。