點擊新增一個下拉框 與前一個內(nèi)容一樣 但不能選同一個值

主要是看下拉選擇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="所屬節(jié)點"
                :prop="'trapolicies.'+index+'.nodeId'"
                :rules="[{ required: true,message: '請選擇所屬節(jié)點',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="請先創(chuàng)建流分類">
                    <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="請先創(chuàng)建流動作">
                    <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:文章來源地址http://www.zghlxwxcb.cn/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)
    },

到了這里，關(guān)于【點擊新增一個下拉框 與前一個內(nèi)容一樣 但不能選同一個值】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！