Vue_element-ui 表单校验问题

1. 表单校验问题一： this.$refs.xxxx.validate is not a function

由element-ui组件的文档中可知，若我们想要使用表单校验规则，我们需要有一下两步必须的操作

• 1. el-form表单上面绑定ref=‘表单名称’ rules=‘表单规则’

              <el-form ref="cateForm"
                       :model="cateForm"
                       :rules="cateRules"
                       :inline="true"
              >
              </el-form>

• 2. 进行校验

        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });

但在实验时发现，我有一个表单，正常按照上面步骤进行校验发现没有任何问题。但是在这个表单中还有一个表单，是一种嵌套的形式，此时我想要按照上面的this.$refs[formName]进行校验，报错
Error in v-on handler: "TypeError: this.$refs.xxxx.validate is not a function"，此时我们需要这样，后面加上[0]即可解决问题.

        this.$refs[formName][0].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });

此时我们会发现，打印this.$refs[formName]，结果是一个数组[VueComponent]，所以需要进行数组中取值这样的一种操作

2. 表单校验问题二：TS报错

JS语法时，我们按照官网提示实例，可以写法如下

        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });

但在TS时，会报错，认为我们的类型不明确···type 'Element | Vue | Vue[] | Element[]'，可以写成这样

import { Form } from 'element-ui'
 (this.$refs['form'] as Form).validate((valid: boolean) => {
      if (valid) {
        this.submitData()
      } else {
        return false
      }
    })

对于需要[0]的这种形式，可以改写成这样
    const categoryForm: any = this.$refs.cateForm
    if (!categoryForm) return
    
    categoryForm[0].validate((valid: boolean) => {
      if (valid) {
        if (type === 'save') {
          return this.submitCateData()
        }
        if (type === 'edit') {
          return this.editCateData()
        }
      } else {
        return false
      }
    })

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~