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变化后立马校验规则。

你可能感兴趣的:(Element-ui关于form表单的踩坑)