Element-ui关于form表单的踩坑

1 动态切换el-form-item时

使用 v-if条件渲染el-form-item组件,并需要切换不用表单项时,需要在el-form-item组件上添加唯一的key属性值,防止切换后,新的el-form-item组件仍然显示切换前的表单错误验证提示;并且如果没有添加key值,动态添加的表单项的规则验证只会在提交时生效,其规则定义的trigger无效,所以谨记动态添加的表单项el-form-item一定要加上唯一key值。

2 表单在el-dialog组件内

表单组件el-form封装后放在el-dialog组件内时,切换显示隐藏弹窗时,可以在封装的form组件上加上v-if并绑定el-dialog显示隐藏的布尔值,可以在el-dialog隐藏时同时销毁form组件,可以避免表单项及验证错误提示清除不完全的困扰(el-dialog组件的destroy-on-close属性有bug不起作用)。

3 初始化绑定的表单数据

初始化用v-model绑定在el-form上的表单数据时,最好放在created钩子函数里对表单数据复制,放在mounted里会触发change事件,从而会引起表单验证规则触发。

4 form表单的rule属性需要动态变化时

el-form组件有个validate-on-rule-change属性,默认是true,设置为false可以防止rule变化后立马校验规则。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。