vue3封装el-form

在Vue3中，封装Element UI的`<el-form>`组件通常是将这个复杂组件抽离成一个自定义的复用组件，以便于管理状态、事件和属性。以下是基本的步骤：

1. **创建组件**:
首先，创建一个新的`.vue`文件，例如`Form.vue`，并导入需要的Element UI模块以及Vue3的Composition API。

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <!-- 根据需求嵌套el-form-item -->
    <el-form-item v-for="(item, index) in fields" :key="index" :label="item.label" :prop="item.prop">
      {{ item.render }}
    </el-form-item>
  </el-form>
</template>

<script>
import { defineComponent } from 'vue';
import { ElFormItem } from 'element-plus';

export default defineComponent({
  components: {
    ElFormItem,
  },
  setup(props, { emit }) {
    // 定义表单数据模型和规则
    const form = reactive({ ... });
    const rules = {
      ...;
    };

    // 如果有动态字段，可以添加动态渲染函数
    const fields = [
      {
        prop: 'field1',
        label: 'Field 1',
        render: () => (
          <el-input v-model={form.field1} placeholder="请输入..."></el-input>
        ),
      },
      //...
    ];

    return { form, rules, fields };
  },
});
</script>

2. **处理状态和事件**:
- 可以通过`ref`获取到`<el-form>`组件实例，监听其内置的验证和提交事件。
- 对于更复杂的交互，可以在组件内部提供一些公共方法，如`validate`, `submit`等，供外部调用。

3. **对外暴露接口**:
可以提供`props`接收外部传入的数据，比如初始值`initialValue`，以及通过`emit`触发的事件，如`onSubmit`.

// 示例中只展示了部分接口
export default defineComponent({
  props: {
    initialValue: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    onSubmit(data) {
      emit('submit', data);
    },
  },
});

4. **使用组件**:
将封装后的`Form`组件在其他地方引用，并传递必要的参数。

<Form :initial-value="initialFormData" @submit="handleFormSubmit"></Form>

<script>
import Form from './Form.vue';

export default {
  components: {
    Form,
  },
  methods: {
    handleFormSubmit(data) {
      console.log('表单提交:', data);
    },
  },
};
</script>