element表单disabled功能失效问题

麻瓜呀2024-07-23 19:08

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绑定的对象是动态获取的, 但没有声明默认值会造成绑定失效