封装一个element plus的表单组件 通过传入配置项数组来渲染页面 并将代码告诉我

好的，下面是一个基于 Element Plus 的表单组件的代码，可以通过传入配置项数组来渲染页面：

<template>
  <el-form :model="form" ref="form" :rules="rules">
    <el-form-item v-for="item in formItems" :key="item.prop" :label="item.label" :prop="item.prop">
      <el-input v-if="item.type === 'input'" v-model="form[item.prop]" placeholder="请输入{{ item.label }}"></el-input>
      <el-date-picker v-else-if="item.type === 'date'" v-model="form[item.prop]" type="date" placeholder="选择日期"></el-date-picker>
      <el-select v-else-if="item.type === 'select'" v-model="form[item.prop]" placeholder="请选择{{ item.label }}">
        <el-option v-for="option in item.options" :key="option.value" :label="option.label" :value="option.value"></el-option>
      </el-select>
      <el-checkbox v-else-if="item.type === 'checkbox'" v-model="form[item.prop]">{{ item.label }}</el-checkbox>
      <el-radio-group v-else-if="item.type === 'radio'" v-model="form[item.prop]">
        <el-radio v-for="option in item.options" :key="option.value" :label="option.value">{{ option.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'MyForm',
  props: {
    formItems: {
      type: Array,
      required: true
    },
    rules: {
      type: Object
    }
  },
  data() {
    return {
      form: {}
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', this.form);
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};
</script>

<style scoped>
.el-form-item__label {
  width: 80px;
}
</style>

使用时，需要传入一个 `formItems` 数组和一个 `rules` 对象。`formItems` 数组包含了每个表单项的配置项，如下：

[
  {
    prop: 'name',
    label: '姓名',
    type: 'input',
  },
  {
    prop: 'gender',
    label: '性别',
    type: 'radio',
    options: [
      {
        label: '男',
        value: 'male',
      },
      {
        label: '女',
        value: 'female',
      },
    ],
  },
  {
    prop: 'birthday',
    label: '出生日期',
    type: 'date',
  },
  {
    prop: 'hobby',
    label: '爱好',
    type: 'checkbox',
  },
  {
    prop: 'city',
    label: '城市',
    type: 'select',
    options: [
      {
        label: '北京',
        value: 'beijing',
      },
      {
        label: '上海',
        value: 'shanghai',
      },
      {
        label: '广州',
        value: 'guangzhou',
      },
    ],
  },
]

`rules` 对象用于验证表单项的值，可参考 Element Plus 的 Form Validation 的文档。

这是一个非常基础的表单组件甚至不能算作“仿写 element plus”，但是它的原理是很好理解的。我们只需要根据 `formItems` 数组中的每个元素来生成对应的组件，并通过 `v-model` 来绑定表单项的值，当用户点击“提交”按钮时，我们调用 `this.$refs.form.validate()` 来验证表单项的值是否合法，如果通过验证，则调用 `this.$emit('submit', this.form)` 来触发外部组件的提交事件，将表单数据传递给外部组件。当用户点击“重置”按钮时，我们使用 `this.$refs.form.resetFields()` 来重置表单数据。