vue Element 中的下拉框不重复,下拉框和下拉框选项是循环的

实现思路

有一个数组是存放下拉框的选项,一个局部数组变量存放已经选择的选项
循环存放已经选择过的数组,将值加入局部数组变量
循环局部数组变量,和传入的值进行对比,如果相等返回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:存放下拉框的下拉选项

发布了17 篇原创文章 · 获赞 0 · 访问量 417

猜你喜欢

转载自blog.csdn.net/weixin_44805161/article/details/104031374