山西省政府网站集约化建设工作/百度账号申诉

点击新增一个下拉框 与前一个内容一样 但不能选同一个值

主要是看下拉选择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"><iclass="el-icon-remove-outline remove-button"v-if="form.trapolicies.length > 1"@click="removePolicy(index)"/><el-form-itemlabel="所属节点":prop="'trapolicies.'+index+'.nodeId'":rules="[{ required: true,message: '请选择所属节点',trigger: 'change',}]"><el-selectv-model="trapolicy.nodeId"style="margin-left: 20px"placeholder="请选择"@change="change"><el-optionv-for="(item) in nodes":key="item['res-id']":label="item.name":value="item['res-id']"></el-option></el-select></el-form-item><el-form-itemlabel="名称":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-itemlabel="描述":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><iclass="el-icon-remove-outline remove-btn"v-if="trapolicy.config.length>1"@click="removeConfig(index)"/><el-form-itemlabel="流分类":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-optionv-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-itemlabel="流动作":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-optionv-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><iclass="el-icon-circle-plus-outline add-btn"v-if="trapolicy.config.length===i+1"@click="addConfig(index)"/></el-col></div><iclass="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:

// 获取流分类、流动作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)},