Form-Render4-Vue3-Pro

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

项目目前支持UI库:

1. element-plus
2. arco-design

在线演示

💎 更新日志

🌈 如何使用

安装

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

1// main.js
2import { createApp } from 'vue'
3// import FormRender4Vue3 from 'form-render4-vue3-pro/arco-design'
4import FormRender4Vue3 from 'form-render4-vue3-pro/element-plus'
5import App from './App.vue'
6
7const app = createApp(App)
8app.use(FormRender4Vue3,{ warning:false }) // 安装组件时可选择警告信息打印与否 
9app.mount('#app')

1<template>
2  <!-- 你的组件 -->
3  <form-render4-vue3-pro
4    :schema="schema"
5    v-model="formData"
6    :option-data="optionData"
7  />
8</template>
9
10<script setup>
11import { reactive } from 'vue'
12
13const formData = reactive({})
14const optionData = reactive({
15  address: {
16    list: [
17      {
18        label: '北京',
19        value: 'beijing',
20      },
21      {
22        label: '上海',
23        value: 'shanghai',
24      },
25      {
26        label: '深圳',
27        value: 'shenzhen',
28      },
29      {
30        label: '成都',
31        value: 'chengdu',
32      },
33    ],
34    key: 'value',
35  },
36})
37const schema = reactive({
38  props: {
39    layout: 'horizontal',
40    labelAlign: 'left',
41  },
42  fields: [
43    {
44      type: 'input',
45      title: '姓名',
46      field: 'name',
47      value: '',
48      props: {
49        placeholder: '输入姓名',
50      },
51    },
52    {
53      type: 'select',
54      title: '地址',
55      field: 'address',
56      value: '',
57      props: {
58        placeholder: '选择地址',
59      },
60    },
61  ],
62})
63</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