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

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

主要是看下拉选择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:

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