form-render4-vue3-pro 是基于 vue3 的表单生成组件，组件包含了日常使用的表单组件，意在解决项目日常开发中表单代码重复书写的问题，提高开发效率。

项目目前支持UI库:

1. element-plus
2. arco-design

在线演示

💎 更新日志

🌈 如何使用

安装

npm install form-render4-vue3-pro --save

// main.js
import { createApp } from 'vue'
// import FormRender4Vue3 from 'form-render4-vue3-pro/arco-design'
import FormRender4Vue3 from 'form-render4-vue3-pro/element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(FormRender4Vue3,{ warning:false }) // 安装组件时可选择警告信息打印与否 
app.mount('#app')

<template>
  <!-- 你的组件 -->
  <form-render4-vue3-pro
    :schema="schema"
    v-model="formData"
    :option-data="optionData"
  />
</template>

<script setup>
import { reactive } from 'vue'

const formData = reactive({})
const optionData = reactive({
  address: {
    list: [
      {
        label: '北京',
        value: 'beijing',
      },
      {
        label: '上海',
        value: 'shanghai',
      },
      {
        label: '深圳',
        value: 'shenzhen',
      },
      {
        label: '成都',
        value: 'chengdu',
      },
    ],
    key: 'value',
  },
})
const schema = reactive({
  props: {
    layout: 'horizontal',
    labelAlign: 'left',
  },
  fields: [
    {
      type: 'input',
      title: '姓名',
      field: 'name',
      value: '',
      props: {
        placeholder: '输入姓名',
      },
    },
    {
      type: 'select',
      title: '地址',
      field: 'address',
      value: '',
      props: {
        placeholder: '选择地址',
      },
    },
  ],
})
</script>

API

Props

| 参数名 | 类型 | 描述 | 是否必须 | | ------------------- | ------ | ---------------------------------------------------------------------------- | -------- | | modelValue(v-model) | Object | 表单数据对象 | Yes | | schema | Object | 生成表单的 JSON 对象 | Yes | | optionData | Object | select、checkbox、radio、tree-select、cascader、transfer等组件选项的数据源 | No |

Methods

| 方法名 | 描述 | 参数 | 返回值 | | ------------- | -------------------- | ---------- | ------- | | validate | 校验表单全部数据 | - | Promise | | clearValidate | 清除校验表单校验数据 | - | - | | reset | 重置表单字段 | -/string[] | void |

Slots

| 插槽名 | 描述 | 参数 | | | ------ | ---- | ---- | --- | | footer | 页脚 | - | - |

Schema 字段描述

| 字段名称 | 类型 | Description | 是否必须 | | -------- | ------ | ------------------------------------------ | -------- | | fields | Array | 生成表单项的数组 | Yes | | rules | Object | 使用方式参考 arco-design from 表单 rules | No | | props | - | 使用方式参考 arco-design from 表单原生属性 | No | | column | Number | 生成表单项的列数 | Yes | | gutter | Number | 表单项之间的间隔 | No |

fields 字段描述

| 字段名称 | 类型 | Description | 是否必须 | |------------|-------------|-----------------------------------------------------------------------------------------| -------- | | datasource | DataSource | 远程加载数据配置 | Yes | | type | String | 指定生成对应 arco-design 的组件，对应关系见下表 type | Yes | | gutter | Number | 用与表单项之间的间隔 ，该项不设置会自动取全局的 gutter | No | | title | String | 表单项的名称 | Yes | | field | String | 表单项绑定的字段 | Yes | | value | any | 该表表单项的值 | No | | props | Object | 生成最终组件的 props 项，对应 arco-design 组件的 props | No | | span | Number | 该表单项独占的栅格数（默认为 24） | No | | show | Boolean | 控制表单项显示与否，默认为：true | No | | config | Object | a-form-item组件配置对象，字段参考a-form-item组件属性 | No | | children | Array | 嵌套表单项 | No | | watcher | Array | 字段联动动作 | No |

当前支持的组件

| type | 对应的 arco-design 组件名 | |-------------------|---------------------| | form-item | 表单项，复杂表单布局可能会使用到 | | input | a-input | | input-number | a-input-number | | checkbox | a-checkbox | | radio | a-radio | | switch | a-switch | | slider | a-slider | | textarea | a-textarea | | rate | a-rate | | upload | a-upload | | time-picker | a-time-picker | | verification-code | a-verification-code | | tree-select | a-tree-select | | date-range-picker | a-date-range-picker | | date-picker | a-date-picker | | cascader | a-cascader | | transfer | a-transfer | | divider | a-divider | | alert | a-alert | | color | a-color |