动态设置select禁用

动态设置select禁用

有两个输入框，让第一个有值时，第二个选择框才可选择内容。

代码如下：

<el-form-item>
    <el-date-picker
      v-model="value3"
      type="year"
      placeholder="选择年"
      @change="handleChoose"
      >
    </el-date-picker>
</el-form-item>
<el-form-item>
    <el-select
         v-model="value3"
         placeholder="请选择"
         :disabled="isDisabled"
        >
        <el-option 
            v-for="item in List" 
            :key="item.id" 
            :label="item.label" 
            :value="item.value"
            ></el-option>
    </el-select>
</el-form-item>

data(){
    return{
        isDisabled:true,
    }
},
methods:{
    handleChoose(){
        if(this.dataForm.year=='' || this.dataForm.year==null){
            this.isDisabled=true;
        }else{
            this.isDisabled=false;
        }
    }
}

第一个输入框使用change，保证第一个选定值时触发事件。

第二个输入框绑定了一个disabled，动态绑定必须加：(冒号)。data里面默认disabled为true。

问题①：但是，这样写出问题了，只有刚开始的时候第二个select禁用，（我这个表单是写在dialog对话框中的）当我关上对话框，再打开时第二个select就不禁用了。因为你关之前isDisabled=false，（关上的时候把第一个输入框内容清空了，但是此时不是初始页面，此时disabled不为true（刷新页面过后才是初始页面，初始时disabled为true），所以此时disabled不为true）再打开时未选择第一个输入框的值，就不会触发方法，disabled仍为false。所以这时候就有一个bug，在以上情况下，关上再打开时，第二个输入框不禁用且第一个输入框没有选择值。

解决：查阅dialog文档，写了一个closed方法

代码如下：

<el-disable @closed="closeDialog"></el-disable>

methods:{
    closeDialog(){
        this.isDisabled=true;
    }
}

问题②：handleChoose我刚开始是这样写的：

if(this.dataForm.year！=='' || this.dataForm.year！==null){
            this.isDisabled=false;
        }else{
            this.isDisabled=true;
        }

这样写的话，当我第一个输入框选中值之后，第二个select变为不禁用，此时，我使用clearable清空第一个输入框，第一个输入框没有值，第二个应该变成禁用，但是并没有变成禁用。改成如下代码，就可以实现，清空第一个，第二个立马变禁用。

if(this.dataForm.year=='' || this.dataForm.year==null){
            this.isDisabled=true;
        }else{
            this.isDisabled=false;
        }

我说不出原因！！！！！！！！！！！！！！求解（为什么第二种方法就可以，第一种就不可以）