https://github.com/dtstack/dt-form-renderer
Render Interaction Form Via JSON
https://github.com/dtstack/dt-form-renderer
ant-design formrenderer interaction json react
Last synced: 9 months ago
JSON representation
Render Interaction Form Via JSON
- Host: GitHub
- URL: https://github.com/dtstack/dt-form-renderer
- Owner: DTStack
- License: mit
- Created: 2023-02-23T07:29:37.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-18T14:39:43.000Z (over 1 year ago)
- Last Synced: 2024-08-18T15:57:02.331Z (over 1 year ago)
- Topics: ant-design, formrenderer, interaction, json, react
- Language: TypeScript
- Homepage: https://dtstack.github.io/dt-form-renderer/
- Size: 13 MB
- Stars: 18
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
dt-form-renderer
- 一个基于 React 和 Ant-Design 的表单渲染器
- 使用 JSON 描述表单
- 支持复杂的联动逻辑
## 文档
- [FormRenderer 组件](./docs/FormRenderer.md)
- [JSON 配置](./docs//JsonConfig.md)
- [表达式](./docs/Expression.md)
- [表单联动](./docs/Interaction.md)
- [自定义表单控件](./docs/Widget.md)
- [表单 Service](./docs/FormService.md)
- [CHANGELOG](./packages/core/CHANGELOG.zh-CN.md)
## 使用
组件
```jsx
import React, { useRef } from 'react';
import FormRenderer from 'dt-form-renderer';
import jsonConfig from './jsonConfig';
function FormDemo () {
const formRef = useRef();
return (
console.log(args)}
initialValues={{}}
jsonConfig={}
defaultExtraData={{}}
/>
)
}
```
表单配置
```js
const jsonConfig = {
description: '这是一份表单配置',
fieldList: [
{
fieldName: 'schema',
label: 'schema',
widget: 'Select',
widgetProps: {
placeholder: '请选择schema',
options: [],
allowClear: true,
},
},
{
fieldName: 'tableName',
label: '表名',
dependencies: ['schema'],
widget: 'Select',
widgetProps: {
options: [],
placeholder: '请选择表名',
},
rules: [
{
required: true,
message: '请选择表名！',
},
],
},
],
};
export default jsonConfig;
```
## 在线编辑
[PlayGround](https://dtstack.github.io/dt-form-renderer/)