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

hide-required-asterisk>

label="选择">

v-for="item in options"

:key="item.value"

:label="item.label"

:value="item.value"

:disabled="item.disabled">

class="cursor-font margin-left">{{i===0?'添加':'删除'}}

提交

取消

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()

}

}

}

.select {

width: 400px;

}

.margin-left {

margin-left: 44px;

}

.cursor-font {

cursor: pointer;

}

.blue {

color: blue;

}

.red {

color: red;

}