TS+Vue3中表单重置和校验时ref的两种定义方法

 
      
 
//如上所示，我们表单的ref为pointConfigRef
//在Vue3中，我们可以这样获取ref，在setup中可以直接使用
const pointConfigRef = ref();
//如果这样获取的话，我们在进行表单重置的时候，直接
pointConfigRef.value.resetFields()

但是上述获取ref有缺陷，就是当我们提交按钮进行表单校验的时候，valid需要设置类型

function submitForm() {
 pointConfigRef.validate(async (valid：需要给个类型，比如Boolean，否则有代码类型错误提示) => {
    if (valid) {
      ...
      } 
    
  });
}

此时可以利用第二种方法来获取ref

import {FormInstance} from 'element-plus';//首先引入FormInstance
const pointConfigRef = ref()
//FormInstance是element-plus中的一个类型
//此时在进行表单重置时，需如在value后边加一个问号
//我觉得是因为ref有类型了，所以ref的值是可能存在的，所以就会有类型校验
//如果不加问号，TS就会报错
pointConfigRef.value?.resetFields()

此时当点击按钮进行表单校验时，需要在template中把ref传进函数

确 定

然后表单校验如下写法即可

function submitForm(el: FormInstance | undefined) {
  if (!el) return
  el.validate(async (valid) => {
    if (valid) {
    ...
         }
  });
}