开始使用
特点
- 基于对象的表单配置选项
- 基于
ant-design-vue
表单,构建了一套基于配置的动态表单渲染
的方式 - 提炼
栅格
、表单元素
、表单验证
等常用表单布局配置到对象 - 解耦
script
与template/jsx
, 减少编程过程中script
与template/jsx
上下文切换
- 基于
- 动态化的配置,尽可能的动态化选项配置
- 天生的拓展自定义能力
- 不改变样式,不侵入样式
安装
npm install vform-ant-design --save-dev
1
使用
import { defineComponent, reactive } from 'vue'
import { useFormBuilder } from 'vform-ant-design'
type FormBean = {
name: string
}
const builder = useFormBuilder<FormBean>()
.Input({
label: '用户名',
dataIndex: 'name'
})
export default defineComponent({
setup() {
const formData = reactive<FormBean>({} as any)
const Form = builder.form()
const FormOptions = builder.build()
return () => {
return <Form form={formData} items={FormOptions} />
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25