vue Element will not be repeated in the drop-down box, drop-down boxes and drop-down box option is circular

Realization of ideas

There is an option to store an array of drop-down box, a partial array variable storage option has been selected
again cycle through the array has been selected, the value added to the array variables local
loop variable local array, and compare the incoming values are equal Returns true if thus disabled, false otherwise

Page Structure

 <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>

Selected realized disabled

// 将选中的项禁用
    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;
    }

Variable Description

selectItemList: local array variable storage option has been selected in order to compare
examTopicTypeList: storage storage option has been selected, it is necessary to submit to the background
topicType: drop-down menu drop-down box store

Published 17 original articles · won praise 0 · Views 417

Guess you like

Origin blog.csdn.net/weixin_44805161/article/details/104031374