vue antd 基于json schema 的动态表单实现 二: 动态表单使用

介绍

本篇文章主要介绍基于json schema 实现 vue antd 的动态表单中的第二部分：使用。

• 源码
• vue-alain
• vue antd 基于json schema 的动态表单实现 一: schema介绍
• vue antd 基于json schema 的动态表单实现 三: 实现

---

运行结果

展示表单是 antd-vue 官方的最后一个案例：antd form

image.png

image.png

代码

模板代码

使用dy-form标签，该标签主要包括以下属性

• formSchema: form数据结构，主要是json schema对象，描述表单需要填写数据对象的结构
• uiSchema: form ui 展示结构，是一个 ui schema 对象，描述如何显示表单
• onSuccess: 表单提交成功执行的事件
• submitting: 表单提交中的状态

逻辑代码(ts)

逻辑代码中主要包括两个属性：uiSchema 和 schema 根据这两个只读属性，可以正常展示表单

---

可以使用的动态组件

目前只有几种常用的动态组件，如下所示

        // 日期范围
        registry.register('df-daterange', DateRangeWidget);

        // 数字输入框
        registry.register('df-number', NumberWidget);

        // 文本框
        registry.register('df-string', StringWidget);
        registry.register('df-text', TextWidget);

        // 区域文本框
        registry.register('df-textarea', TextareaWidget);

        // 开关
        registry.register('df-boolean', SwitchWidget);

        // 拖动条
        registry.register('df-slider', SliderWidget);

        // 星打分
        registry.register('df-rate', RateWidget);

        // 下拉框
        registry.register('df-select', SelectWidget);

        // 单选框
        registry.register('df-radio', RadioWidget);

        // 上传文件
        registry.register('df-upload', UploadWidget);
        registry.register('df-uploaddragger', UploadDraggerWidget);

如果我们将ui shcmea 中的 widget 的type指定为 df-radio,则表示使用单选框渲染组件

---

参考资料

ng-alain-form
json shcema
antd-vue

---

我的公众号

abp爱好者