点击新增一个下拉框 与前一个内容一样 但不能选同一个值
文章来源：https://www.toymoban.com/news/detail-672189.html
主要是看下拉选择el-option的disabled,注意不要混淆
<el-form label-width="120px" :model="form" ref="form" style="color: #fff">
<template v-for="(trapolicy, index) in form.trapolicies">
<el-row>
<el-col :span="16" :offset="4" style="padding-top:20px">
<i
class="el-icon-remove-outline remove-button"
v-if="form.trapolicies.length > 1"
@click="removePolicy(index)"
/>
<el-form-item
label="所属节点"
:prop="'trapolicies.'+index+'.nodeId'"
:rules="[{ required: true,message: '请选择所属节点',trigger: 'change',}]"
>
<el-select
v-model="trapolicy.nodeId"
style="margin-left: 20px"
placeholder="请选择"
@change="change"
>
<el-option
v-for="(item) in nodes"
:key="item['res-id']"
:label="item.name"
:value="item['res-id']"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="名称"
:prop="'trapolicies.'+index+'.policyName'"
:rules="[{required:true,message:'请输入名称'},{validator:checkData,trigger:'blur'}]"
>
<el-input style="margin-left: 20px; width: 265px" v-model="trapolicy.policyName"/>
</el-form-item>
<el-form-item
label="描述"
:prop="'trapolicies.'+index+'.description'"
:rules="[{validator:checkData,trigger:'change'}]"
>
<el-input style="margin-left: 20px; width: 265px" maxlength="127" show-word-limit v-model="trapolicy.description"/>
</el-form-item>
<div v-for="(cfg,i) in trapolicy.config">
<el-col :span="20" :offset="2">
<el-divider/>
</el-col>
<el-col :span="11" :offset="6" style="position: relative">
<span class="rule-index">流分类-流动作 {{ i + 1 }}</span>
<i
class="el-icon-remove-outline remove-btn"
v-if="trapolicy.config.length>1"
@click="removeConfig(index)"
/>
<el-form-item
label="流分类"
:prop="'trapolicies.'+index+'.config.'+i+'.classifyName'"
:rules="[{required:true,message:'请选择流分类',trigger:'blur'}]"
>
<el-select v-model="cfg.classifyName" placeholder="请选择" style="width: 100%" no-data-text="请先创建流分类">
<el-option
v-for="(item, index) in classifies"
:key="index"
:label="item.classifyName"
:value="item.classifyName"
:disabled="trapolicy.config.some(c=>c.classifyName===item.classifyName && c.classifyName!==cfg.classifyName)"
/>
</el-select>
</el-form-item>
<el-form-item
label="流动作"
:prop="'trapolicies.'+index+'.config.'+i+'.behaviorName'"
:rules="[{required:true,message:'请选择流动作',trigger:'blur'}]"
>
<el-select v-model="cfg.behaviorName" placeholder="请选择" style="width: 100%" no-data-text="请先创建流动作">
<el-option
v-for="(item, index) in beahaviors"
:key="index"
:label="item.behaviorName"
:value="item.behaviorName"
:disabled="trapolicy.config.some(c=>c.behaviorName===item.behaviorName && c.behaviorName!==cfg.behaviorName)"
/>
</el-select>
</el-form-item>
<i
class="el-icon-circle-plus-outline add-btn"
v-if="trapolicy.config.length===i+1"
@click="addConfig(index)"
/>
</el-col>
</div>
<i
class="el-icon-circle-plus-outline add-button"
v-if="form.trapolicies.length === index + 1"
@click="addPolicy()"
/>
</el-col>
</el-row>
<el-row>
<el-col :span="20" :offset="2">
<el-divider/>
</el-col>
</el-row>
</template>
</el-form>
methods:文章来源地址https://www.toymoban.com/news/detail-672189.html
// 获取流分类、流动作
async change(value) {
this.classifies = await getTrafficClassifierById(value)
this.beahaviors = await getTrafficBehaviorById(value)
},
// 表单新增配置框
addPolicy() {
this.form.trapolicies.push({
// "policyId": "1",
policyName: '',
description: '',
nodeId: '',
nodeName: '',
config: [
{
classifyId: '',
classifyName: '',
behaviorId: '',
behaviorName: '',
},
],
})
},
addConfig(i) {
this.form.trapolicies[i].config.push({
classifyId: '',
classifyName: '',
behaviorId: '',
behaviorName: '',
})
},
// 表单移除配置框
removePolicy(index) {
this.form.trapolicies.splice(index, 1)
},
removeConfig(i) {
this.form.trapolicies[i].config.splice(i, 1)
},
到了这里，关于【点击新增一个下拉框 与前一个内容一样 但不能选同一个值】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
