el-form组件封装

el-form 是 ElementUI 中的表单组件，可以方便地实现表单数据收集、校验和提交等功能。在封装 el-form 组件时，可以按照以下步骤进行：

1. 创建一个名为 MyForm 的组件，引入 el-form 组件：

<template>
  <el-form ref="form" :model="formData" :rules="formRules">
    <!-- 表单项内容 -->
  </el-form>
</template>

<script>
import { Form } from 'element-ui';

export default {
  components: {
    [Form.name]: Form,
  },
  props: {
    // 表单数据
    formData: {
      type: Object,
      required: true,
    },
    // 表单校验规则
    formRules: {
      type: Object,
      required: true,
    },
  },
};
</script>

2. 将表单项的内容作为 MyForm 组件的插槽内容，例如：

<template>
  <el-form ref="form" :model="formData" :rules="formRules">
    <slot></slot>
  </el-form>
</template>

3. 在 MyForm 组件中添加提交表单的方法：

<template>
  <el-form ref="form" :model="formData" :rules="formRules">
    <slot></slot>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script>
import { Form } from 'element-ui';

export default {
  components: {
    [Form.name]: Form,
  },
  props: {
    formData: {
      type: Object,
      required: true,
    },
    formRules: {
      type: Object,
      required: true,
    },
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，提交表单数据
          this.$emit('submit', this.formData);
        }
      });
    },
  },
};
</script>

4. 在使用 MyForm 组件的父组件中，使用 v-model 双向绑定表单数据，并监听 MyForm 组件的 submit 事件进行表单提交：

<template>
  <my-form v-model="formData" :form-rules="formRules" @submit="handleSubmit">
    <!-- 表单项内容 -->
  </my-form>
</template>

<script>
import MyForm from './MyForm';

export default {
  components: {
    MyForm,
  },
  data() {
    return {
      formData: {
        // 表单数据结构
      },
      formRules: {
        // 表单校验规则
      },
    };
  },
  methods: {
    handleSubmit(formData) {
      // 提交表单数据
    },
  },
};
</script>

这样，一个简单的 el-form 组件封装就完成了。在实际开发中，可以根据具体需求添加更多的功能和特性，如自定义表单项、表单项联动、表单数据初始化等。