element-plus表单验证bug

遇到问题表单验证bug,待解决

img

出错地方


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

img

表单时错误的时候,promise为full,返回false

img

那应该时代码逻辑错误了,导致promise没有未full现在找不到是哪错

  • 请看👉 :elementUI编辑与新增弹窗结合表格常见bug解决方案
  • 除此之外, 这篇博客: element 使用过程中遇到的问题及解决方法中的 Bug1: 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 在测试IE时,发现我的项目Dialog会出现以下两个问题

    (1)在 Dialog 出现时 body 滚动没有锁定

    (2)遮罩覆盖了内容,出现在了内容上方【严重

    这两个问题均在IE下会出现,问题(2)可能是我的项目问题,当然我也怀疑是不是因为Dialog DOM节点较深(12层)导致IE渲染出错?但这两个问题最终都解决了,方法如下:

    只需将这个属性设置为true即可。