vue3封装Element动态表单组件

最新推荐文章于 2025-09-09 04:10:22 发布

原创

最新推荐文章于 2025-09-09 04:10:22 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

文章介绍了如何使用Vue封装一个名为DymanicForm.vue的组件，该组件支持动态加载不同类型的Element-Plus组件，并实现自定义验证规则。它展示了如何在模板中使用组件、传递参数以及处理表单验证和重置功能。

在这里插入图片描述

1. 封装组件DymanicForm.vue

使用component实现动态组件

组件不能直接使用字符串传入，所以根据传入的组件名称找到对应的组件

校验规则，可使用rule传入自定义规则，也可以使用封装好的基本规则示例中使用了checkRequired

暴露重置方法和校验方法

<template>
  <el-form
    :model="currentValue"
    ref="dymanicForm"
    v-bind="$attrs"
    @submit.native.prevent
  >
    <el-form-item
      :prop="index"
      :rules="item.rules"
      v-for="(item, index) in currentSchema"
      :key="index"
      v-bind="item.formItem || {}"
    >
      <component
        v-model="currentValue[index]"
        :is="item.componentName"
        v-bind="item"
        v-on="item.methods || {}"
      />
    </el-form-item>
    <slot />
  </el-form>
</template>

<sc