动态设置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,保证第一个选定值时触发事件。
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致,可受 value-format 控制 |
第二个输入框绑定了一个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; }
我说不出原因!!!!!!!!!!!!!!求解(为什么第二种方法就可以,第一种就不可以)