两个下拉菜单关联,一个变化了影响另一个的内容以及活性的设置,需要注意的是,赋值的时候要是用this.$set进行赋值
html代码
<el-form-item label="调整模式" prop="changeMode">
<el-select v-model="form.changeMode" placeholder="请输入调整模式"
filterable clearable style="width: 100%"
@change="handleChange">
<el-option v-for="dict in dict.type.change_mode"
:key="dict.value"
:label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="调整类型" prop="changeType">
<el-select v-model="form.changeType" placeholder="请输入调整类型"
clearable filterable style="width: 100%"
:disabled="showChangeType">
<el-option v-for="dict in dict.type.change_type"
:key="dict.value"
:value="dict.value"
:label="dict.label"></el-option>
</el-select>
</el-form-item>
js代码
/**状态改变事件*/
handleChange(val) {
if (val == 1) {
this.showChangeType = true;
this.$set(this.form, "changeType", "1");
} else {
this.showChangeType = false;
this.$set(this.form, "changeType", "");
}
},
网上有其他人使用过下面这个方式进行赋值,但是我试了一下,不好用,本人推荐使用上面的方式进行赋值
this.$set(this.form, this.form.changeType, "1");