select根据当前值禁用下拉选项

1,154 阅读1分钟

方法一:

<el-select v-model="form.value" placeholder="请选择"
@visible-change="ReplyProcessStatus"
>
<el-option v-for="item in list" :key="item.value"
:label="item.label" :value="item.value"
:disabled="item.disabled"
> </el-option>
</el-select>

// 1.在获取select数组时循环统一加上disabled=fasle 
// 2.然后在点击select方法里进行判断需要禁用的值为disabledtrue
ReplyProcessStatus(val) {
      if (val === 2 || val === 3 || val === 4 || val === 5) {
        this.list.forEach((ele, index) => {
          this.list[index].disabled = true
        })
      }
      if (val === 1) {
	this.list[0].disabled = true
	  }
      if (val === 0) {
        this.list.forEach((ele, index) => {
          if (ele.id === 3) {
            this.list[index].disabled = true
          }
        })
      }
    }

方法二:

<el-select v-model="form.value" placeholder="请选择"
>
<el-option v-for="item in list" :key="item.value"
:label="item.label" :value="item.value"
:disabled="disabledFn(form.value,item)"
> </el-option>
</el-select>
  methods:{
    isdisabled(val,item){
      if(val==2){ //当选项value值为2的时候禁用选项value值为1的那一项
        return item.value == 1
      }
      if(val == 3 || val == 4 ||val==5){ //当选项value值为3/4/5的时候禁用所有选项
       return true
      }
    }
  }