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

<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="item.label"
            :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
        <span @click="i===0?addClick():delClick(i)" :class="i===0?'blue':'red'"
              class="cursor-font margin-left">{{i===0?'添加':'删除'}}</span>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="cancelForm">取消</el-button>
  </div>
</template>

<script>
    export default {
        name: 'Select',
        data() {
            return {
                options: [],
                validateForm: {
                    email: '',
                    arr: ['']
                },
                validateRules: {
                    email: [
                        {required: true, message: '请输入邮箱地址', trigger: 'blur'},
                        {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                    ],
                    select: [
                        {required: true, message: '请选择', trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            getOption(state, i) {
                if (!state) {
                    return
                }
                let arr = this.validateForm.arr
                let result = [
                    {
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }
                ]
                result.forEach((item, index) => {
                    let isDisable = arr.includes(item.value) && arr[i] != item.value
                    result[index].disabled = isDisable
                })
                this.options = result
            },
            addClick() {
                this.validateForm.arr.push('')
            },
            delClick(i) {
                this.validateForm.arr.splice(i, 1)
            },
            submitForm() {
                this.$refs.validateForm.validate((valid) => {
                    if (valid) {
                        this.$message.success('提交成功:' + this.validateForm)
                    } else {
                        this.$message.error('请填写完整')
                        return false;
                    }
                });
            },
            cancelForm() {
                // 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
                this.$refs.validateForm.resetFields()
            }
        }
    }
</script>

<style scoped>
  .select {
    width: 400px;
  }

  .margin-left {
    margin-left: 44px;
  }

  .cursor-font {
    cursor: pointer;
  }

  .blue {
    color: blue;
  }

  .red {
    color: red;
  }
</style>

 

来源：CSDN

作者：熙冰

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