<el-form ref="pointConfigRef" :model="form" :rules="rules" label-width="80px">
</el-form>
//如上所示,我们表单的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>()
//FormInstance是element-plus中的一个类型
//此时在进行表单重置时,需如在value后边加一个问号
//我觉得是因为ref有类型了,所以ref的值是可能存在的,所以就会有类型校验
//如果不加问号,TS就会报错
pointConfigRef.value?.resetFields()
此时当点击按钮进行表单校验时,需要在template中把ref传进函数
<el-button :loading="buttonLoading" type="primary" @click="submitForm(pointConfigRef)">确 定</el-button>
然后表单校验如下写法即可
function submitForm(el: FormInstance | undefined) {
if (!el) return
el.validate(async (valid) => {
if (valid) {
...
}
});
}