-
设置表单验证
官方提供的是给一个 form 对象下属性添加 prop 去验证,有的场景是弹窗内是一个数组,则需要以下方法处理:
(1)以上,如果一个对象里面包含的是数组,需要 v -for 遍历,el-form 行中:model='item', 提交时触发 submit 方法
submit(){
let isCanSubmit = true; for(let i = 0; i < this.$refs.personCommonContact.length; i++){this.$refs.personCommonContact[i].validate((valid) => {if (!valid) {return isCanSubmit = false; // 遍历时验证有问题将 isCanSubmit 改为 false} }) } if(isCanSubmit){验证没问题继续写业务}
}
(2)
第 2 种方法是直接在 el-form 里面去遍历,el-form-item 的写法 :prop=”works[${index}].startDate
“
调用 submit 方法:
submit(){this.$refs.personWorks.validate((valid) => {if(valid){验证没问题继续写业务}else{弹出提示内容} })
}
- 清除验证问题。
除了官方提供的方法以外,有的场景是清除的方法不是在 form 表单内点击按钮触发,可能是弹窗初始化的时候要清除内容或者验证
this.$refs.form && this.$refs.form.resetFields() 清除内容和验证
this.$refs.form && this.$refs.form.clearValidate() 清除表单验证 - el-select 下拉框不能重新选择的问题
可能是因为下拉框的 key 层次嵌套太深,数据更改后没有触发 vue 的 render
可使用 this.$forceUpdate()强制更新 -
在 vue + element 项目中使用绑定对象时,如时间组件选中后无法显示,则应该:
this.$set(obj,’key’,value 值或者 null)
增加多个属性:this.obj = Object.assign({},this.obj,{key1: 1, key2:2
})
(切记:el-picker 组件只接收字符串类型)
对象增加属性时,不能直接赋值,如 this.obj.key = ‘xxx’持续更新中。。。