element表单disabled功能失效问题

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

相关推荐
sunn。23 分钟前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
烛阴43 分钟前
Express入门必学三件套:路由、中间件、模板引擎全解析
javascript·后端·express
哟哟耶耶1 小时前
React-01React创建第一个项目(npm install -g create-react-app)
前端·javascript·react.js
张拭心1 小时前
工作九年程序员的三月小结
android·前端
try again!1 小时前
HTML快速上手
前端·css·html
Dontla1 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标防抖处理、mousemove、debounce()、事件停止触发、超时触发
前端·计算机外设
喝拿铁写前端1 小时前
字段混乱如何影响系统治理?
前端
知远同学2 小时前
关闭Chrome提示更新失败的弹窗
前端·chrome
Heidi__3 小时前
Vue 3 的响应式原理
前端·javascript·vue.js
LinXunFeng3 小时前
Flutter - Xcode16 还原编译速度
前端·flutter·xcode