forminstance在element plus中讲解

`FormInstance` 是 Element Plus 中的一个重要概念，它代表了一个表单实例。在 Element Plus 中，表单（Form）是一个功能强大的组件，可以用来收集、验证和提交用户输入的数据。`FormInstance` 提供了一系列的方法来操作表单，例如设置表单的值、重置表单的状态等。

在 Element Plus 中，通常使用 `ref` 或者 `v-model` 来获得一个表单实例。这个实例提供了如下几种常见的功能：

1. `validate`: 触发表单验证，可选择性地传入一个回调函数，该函数会在验证结束后调用。
2. `resetFields`: 将表单的所有字段重置为初始值。
3. `setFieldsValue`: 设置表单字段的值。

下面是一个使用 `FormInstance` 的基本示例代码：

<template>
  <el-form ref="form" :model="form" label-width="100px">
    <el-form-item label="活动名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</template>

<script>
import { ref } from 'vue';
import { ElForm, ElFormInstance } from 'element-plus';

export default {
  components: {
    ElForm,
  },
  setup() {
    const form = ref({
      name: '',
      // 其他表单数据
    });
    
    const formInstance: ElFormInstance = ref(null);

    const submitForm = () => {
      formInstance.value.validate((valid) => {
        if (valid) {
          console.log('submit!');
          // 进行提交操作...
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    };

    return {
      form,
      formInstance,
      submitForm,
    };
  },
};
</script>

在上面的代码中，我们通过 `ref` 创建了一个表单实例 `formInstance`，然后可以通过这个实例来调用 Element Plus 提供的方法。