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

实现思路

有一个数组是存放下拉框的选项，一个局部数组变量存放已经选择的选项
循环存放已经选择过的数组，将值加入局部数组变量
循环局部数组变量，和传入的值进行对比，如果相等返回true，从而禁用，否则返回false

页面结构

 

        
        

          {{
            item.topicGrade === 1
              ? "初级："
              : item.topicGrade === 2
              ? "中级："
              : item.topicGrade === 3
              ? "高级："
              : "地狱级："
          }}
          

            
              
              
              
            
            
            道

            每道题
            
            分

            

              
              添加选项
            
            
          
        
      

实现已选的禁用

// 将选中的项禁用
    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：存放下拉框的下拉选项