饿了么Plus组件+TS+Vue3如何使用表单重置

el-dialog组件关闭的时候清空表单内容，点击按钮也一样，改成点击事件就行了

1.引入FormInstance

import type { FormInstance } from 'element-plus'
const formRef = ref<FormInstance>()

2.定义一个空的ref挂载到el-dialog上面

let elm=ref(null)

3.绑定ref,此处的v-model用于控制是否显示弹窗 ，@closed是关闭弹窗的事件方法。

<el-dialog v-model="OrderQuery"  @closed="sta(formRef)" ref="elm">

</el-dialog>

4.model为表单对象，这里也要使用ref，其中的formRef是引入进来的包创建的，在el-form-item组件上绑定prop，值为你的表单内容。

<el-form :model="numberValidateForm" label-position="top"  ref="formRef">
     <el-form-item label="订单号" :label-width="formLabelWidth" prop="name">
       <el-input v-model="numberValidateForm.name" autocomplete="off"  placeholder="请输入订单编号" />
    </el-form-item>
</el-form>

5.触发关闭窗口回调

let sta = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

完整代码：去掉了多余的，留下了最重要的，方便观察

<el-form :model="numberValidateForm"  ref="formRef">
     <el-form-item  prop="name">
       <el-input v-model="numberValidateForm.name"/>
    </el-form-item>
</el-form>

<script lang="ts" setup>
//引入包
import type { FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()

const numberValidateForm = ref({
  name: '',
})

//关闭回调
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>