vue3+typescript +Element-UI组件中Form表单resetFields()重置方法

在 Vue3 中使用 TypeScript 和 Element-UI 组件库，可以通过以下方式在 Form 表单中使用 resetFields() 方法进行重置。

首先，我们需要在组件中引入 Element-UI 的 Form 组件和 ref:

import { defineComponent, ref } from 'vue';
import { ElForm } from 'element-plus';

然后，在组件的 setup() 方法中，定义 ref 类型的 formRef，并在 Form 组件中使用 ref="formRef" 绑定：

export default defineComponent({
  name: 'MyForm',
  setup() {
    const formRef = ref<ElForm | null>(null);

    return {
      formRef,
    };
  },
  // ...
  template: `
    <el-form ref="formRef" :model="form" :rules="rules">
      <!-- 表单元素 -->
    </el-form>
  `,
});

最后，在需要使用 resetFields() 方法的地方，调用 formRef.value?.resetFields() 即可：

export default defineComponent({
  name: 'MyForm',
  setup() {
    const formRef = ref<ElForm | null>(null);

    const resetForm = () => {
      formRef.value?.resetFields();
    };

    return {
      formRef,
      resetForm,
    };
  },
  // ...
  template: `
    <el-form ref="formRef" :model="form" :rules="rules">
      <!-- 表单元素 -->
      <el-button @click="resetForm">重置</el-button>
    </el-form>
  `,
});

注意，由于 formRef 可能为 null，因此需要使用可选链操作符 ? 避免出现运行时错误。同时，resetFields() 方法需要在表单元素渲染完成后才能使用，因此最好将调用方法的逻辑放在按钮点击事件中。