el-select增加删除并禁止重复选择

最新推荐文章于 2024-07-23 15:26:22 发布

熙冰

最新推荐文章于 2024-07-23 15:26:22 发布

阅读量2.2k

点赞数 1

分类专栏： UI组件库文章标签： Element el-select Vue

本文链接：https://blog.csdn.net/melodystars/article/details/103961927

版权

本文介绍了如何在Vue.js应用中，使用Element UI的el-select组件来禁止用户重复选择选项，并添加功能允许用户删除已选选项。通过对el-select的配置和自定义事件处理，实现了这一增强的选中项管理功能。

摘要由CSDN通过智能技术生成

<template>
  <div class="select">
    <el-form :model="validateForm" :rules="validateRules" :show-message="false" ref="validateForm" label-width="100px"
             hide-required-asterisk>
      <el-form-item prop="email" label="邮箱">
        <el-input v-model="validateForm.email"></el-input>
      </el-form-item>
      <el-form-item :prop="'arr.' + i" :rules="validateRules.select" :key="i" v-for="(item, i) in validateForm.arr"
                    label="选择">
        <el-select @visible-change="getOption($event, i)" v-model="validateForm.arr[i]" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label