element表单disabled功能失效问题
场景:当需要根据商品状态来判断是否开启disabled来禁用表单时, disabled绑定了对应的值, 但无论商品是哪种状态, 表单都能操作, disabled失效
html
<el-form-item label="商品分类">
<el-select
v-model="form.packagesTypeIdList"
:disabled="(form.saleFlag === 0 || form.saleFlag === 2) ? false : true"
multiple
placeholder="请选择"
>
<el-option
v-for="item in packagesTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
解决: 在form对象里加入saleFlag的默认值
js
data() {
return {
form: {
saleFlag: 0
}
}
}
原因: 虽然disabled绑定的对象是动态获取的, 但没有声明默认值会造成绑定失效