Elementは、ドロップダウンボックス、ドロップダウンボックスやドロップダウンボックスのオプションで繰り返されることはありませんVUEは円形であります

アイデアの実現

ドロップダウンボックスの配列を格納するためのオプションがあり、部分的な配列変数記憶オプションが選択された
アレイを介して周期は、配列変数ローカルに付加価値が選択されている再び
ループ変数ローカル配列を、着信値が等しい戻り値がtrueの場合である比較しますこのように無効にすると、そうでない場合はfalse

ページ構造

 <div
        class="all-test-type"
        v-for="(item, index) in addForm.examTopicGradeList"
        :key="index">
        <!-- 初级题目 -->
        <div>
          <label class="my-lable no-start">{{
            item.topicGrade === 1
              ? "初级："
              : item.topicGrade === 2
              ? "中级："
              : item.topicGrade === 3
              ? "高级："
              : "地狱级："
          }}</label>
          <div
            class="item-test-type"
            v-for="(item1, index) in item.examTopicTypeList"
            :key="index"
          >
            <el-select
              v-model="item1.topicType"
              class="ipt138"
              placeholder="请选择题目类型"
            >
              <el-option
                v-for="(itemType, index) in topicType"
                :disabled="isSelect(itemType.value,item.topicGrade)"
                :key="itemType.value"
                :label="itemType.label"
                :value="itemType.value"
              >
              </el-option>
              <!-- <el-option
                :label="itemType.label"
                :value="itemType.value"
                :disabled="itemType.disabled"
              >
              </el-option> -->
            </el-select>
            <input v-model="item1.topicNum" class="ipt60 deal" type="number" />
            <span class="unit">道</span>

            <span class="item-score">每道题</span>
            <input v-model="item1.topicScore" class="ipt60" type="number" />
            <span class="unit">分</span>

            <div
              class="add-options"
              @click="addRoidoQuestion(item.examTopicTypeList, item1.topicType)"
              v-if="index == 0"
            >
              <i class=""></i>
              添加选项
            </div>
            <span
              class="el-icon-circle-close add-options-close"
              v-if="index >= 1"
              @click="deltopic(item.topicGrade, index)"
            ></span>
          </div>
        </div>
      </div>

無効実現選択

// 将选中的项禁用
    isSelect(value,rank) {
      const selectItemList = [];
      let item = this.addForm.examTopicGradeList
      for (var i = 0; i < item[rank-1].examTopicTypeList.length; i++) {
        selectItemList.push(item[rank-1].examTopicTypeList[i].topicType);
      }
      // 如果option的value值在已经选择的数组里，则返回false不显示，否则返回true显示
      for (let i in selectItemList) {
        if (selectItemList[i] === value) {
          return true;
        }
      }
      return false;
    }

変数説明

selectItemList：ローカル配列変数のストレージオプションを比較するために選択された
examTopicTypeListを：ストレージ・ストレージ・オプションが選択されている、バックグラウンドに提出する必要がある
topicType：ドロップダウンメニューのドロップダウンボックスストア