ElementUI 03 - 表单重置和表单验证

1,991 阅读1分钟

前言

在实际的搜索和登录业务中,经常需要'重置'功能,如何将多个过滤条件清空重置至默认状态, ElementUI的Form表单el-form中有resetFields方法,就是用于重置表单。 而对于登录时对整个表单的数据验证,则需要el-form的validate()方法。

方法介绍

image.png

image.png

案例1 - resetFields

  1. 为表单添加引用属性'ref'

  2. 为'重置'按钮定义表单重置的方法 image.png

  3. 在methods中实现'restLoginForm'方法 通过表单的ref属性,实现对表单的调用。

resetLoginForm () {
  this.$refs.loginFormRef.resetFields()
}

案例2 - validate

  1. 为表单添加引用属性'ref'

  2. 为'登录'按钮定义表单验证的方法 image.png

  3. 在methods中实现'loginValidate'方法

loginValidate () {
  this.$refs.loginFormRef.validate(async validate => {
    // console.log(validate)
    if (!validate) return
    console.log('登录成功')
  })
}