vue3 el-form二次封装

Vue3中，`el-form`是Element UI提供的表单组件，为了提高代码复用性和灵活性，我们可以对其进行二次封装。二次封装通常是将原生组件抽取成自定义的Vue组件，并提供更简洁、易用的API。

步骤大致如下：

1. **导入基础组件**：首先需要在项目中安装Element UI库，并引入`ElForm`组件。

import { ElForm } from 'element-plus';

2. **创建组件模板**：创建一个新的Vue组件文件，如`CustomForm.vue`，并设置基本结构，包括`form`属性用于接收外部传入的数据。

<template>
  <el-form ref="customForm" :model="form" :rules="rules">
    <!-- 根据实际需求添加表单元素 -->
  </el-form>
</template>

3. **数据绑定和生命周期钩子**：在组件内部，通过`ref`获取到`el-form`实例，处理表单提交、验证等操作。同时可以添加`watch`监听数据变化，以及`mounted`等生命周期钩子。

<script>
export default {
  props: {
    form: {
      type: Object,
      required: true,
    },
    rules: {
      type: Object,
      // ... 规则配置
    },
  },
  setup(props) {
    const customFormRef = ref(null);
    
    onMounted(() => {
      customFormRef.value.validate();
    });

    // 添加事件处理器
    watch(
      () => props.form,
      (newData) => {
        customFormRef.value.setFieldsValue(newData);
      },
      { deep: true }
    );

    return {
      customFormRef,
    };
  },
};
</script>

4. **对外暴露API**：提供一些方法供外部使用，比如提交表单、校验表单等。

// 在methods中定义方法
export default {
  methods: {
    handleSubmit() {
      this.customFormRef.value.submit();
    },
    handleValidate() {
      this.customFormRef.value.validate();
    },
  },
};

5. **使用组件**：在其他地方引用并使用自定义的`CustomForm`组件，传递所需的数据和规则。

<template>
  <CustomForm
    :form="myFormData"
    :rules="validationRules"
    @submit="handleSubmit"
  ></CustomForm>
</template>

<script>
import CustomForm from '@/components/Common/CustomForm';

export default {
  components: {
    CustomForm,
  },
  data() {
    return {
      myFormData: {},
      validationRules: {},
    };
  },
  methods: {
    // 使用自定义方法
  },
};
</script>