在elementui中实现禁用状态下取消验证

原创于 2022-11-10 09:52:51 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

本文探讨了在Vue.js应用中如何根据角色权限控制输入框的禁用状态，并实现禁用时不进行表单验证的功能。通过设置`disabled`属性与`prop`的动态绑定，可以达到在非管理员角色时禁用输入并跳过验证的效果，从而优化用户体验。

背景

实际开发中，有些输入框在某些条件下是禁止输入的

<el-form-item label="姓名" prop="name" >
	<el-input v-model.trim="form.name" :disabled="role!='admin'"></el-input>
</el-form-item>

如上，当角色是非管理员时，禁止输入，但是当角色是管理员时，需要进行验证，如何实现当为禁用时不校验呢？

<el-form-item label="姓名" :prop="role!='admin'?null:'name'" >
	<el-input v-model.trim="form.name" :disabled="role!='admin'"></el-input>
</el-form-item>

prop 是重点，当我们设置不存在的 prop 值时，表单匹配不到规则是不校验的，进而实现功能