Form-Render4-Vue3-Pro
> form-render4-vue3-pro 是基于 vue3 的表单生成组件，组件包含了日常使用的表单组件，意在解决项目日常开发中表单代码重复书写的问题，提高开发效率。
> 项目目前支持UI库:
>1. element-plus
>2. arco-design
[在线演示](https://lq9958.github.io/)
## [💎 更新日志](./CHANGELOG.MD)
## 🌈 如何使用
### 安装
```
npm install form-render4-vue3-pro --save
```
```javascript
// 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')
```
```vue
```
## 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`](https://arco.design/vue/component/form#API)组件属性 | 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 |