遇到问题表单验证bug,待解决
出错地方
const putWorkHandle = async () =>{
console.log(formRef.value)
// 当表单valid为true时,这个注释下面代码都不运行,当表单valid为false时会运行下面代码
formRef.value.validate(async (valid) => {
console.log(valid)
if (valid) {
console.log(data.value,formData.value.orderId)
const dataState = {
orderId:formData.value.orderId,
workLoads: data.value
}
const state = await orderState(dataState)
}else{
console.log(data.value,formData.value.orderId)
}
})
}
下面完整代码
// rule.js
export const rule=[
chooseTime (form){
return [
{required: true, message: '预期时间不能为空', trigger: 'blur' },
{validator:(rule, value, callback) =>{
const chooseTime = new Date(value)
const newDate = new Date()
if (chooseTime < newDate) {
callback(new Error('预期时间不能小于当前时间!'))
}
}, trigger: 'blur' },
]
}
]
const init = async (data,boolean) =>{
console.log(data)
title.value = data.orderTitle
formData.value = data
// dept.deptName = dept.deptName
dialogFormVisible.value = true
disabled.value = boolean
const param = {state:[1],manageId:data.toId}
projectList.value = await getManagerProjectList(param)
console.log(projectList.value)
}
const formData = ref()
const rules = reactive(
{
expectationTime: rule.chooseTime(formData)
}
)
const putWorkHandle = async () =>{
console.log(formRef.value)
// 当表单都为true时,这个注释下面代码都不运行,表单不是完整的时候会运行下面代码
formRef.value.validate(async (valid) => {
console.log(valid)
if (valid) {
console.log(data.value,formData.value.orderId)
const dataState = {
orderId:formData.value.orderId,
workLoads: data.value
}
const state = await orderState(dataState)
}else{
console.log(data.value,formData.value.orderId)
}
})
}
<el-form-item label="预计完成时间" :label-width="formLabelWidth" prop="expectationTime">
<el-date-picker v-model="formData.expectationTime">
</el-date-picker>
</el-form-item>
<el-button type="primary" @click="putWorkHandle" v-if="disabled">
确认
</el-button>
表单时正确的时候,promise为pending,返回undefined
表单时错误的时候,promise为full,返回false
那应该时代码逻辑错误了,导致promise没有未full现在找不到是哪错
在测试IE时,发现我的项目Dialog会出现以下两个问题
(1)在 Dialog 出现时 body 滚动没有锁定
(2)遮罩覆盖了内容,出现在了内容上方【严重】
这两个问题均在IE下会出现,问题(2)可能是我的项目问题,当然我也怀疑是不是因为Dialog DOM节点较深(12层)导致IE渲染出错?但这两个问题最终都解决了,方法如下:
只需将这个属性设置为true即可。