- 确定动态表单项的数据格式,以示例代码为例,数据格式为:
const formItems = [
{
label: "姓名",
name: "name",
type: "input"
},
{
label: "性别",
name: "gender",
type: "select",
options: ["男", "女"]
},
{
label: "出生日期",
name: "birthdate",
type: "datepicker"
}
];
- 在antd-form-builder中使用map函数动态生成表单项,如下所示:
{item.type === "input" && }
{item.type === "select" && (
)}
{item.type === "datepicker" && }
);
})}
- 在页面中动态添加表单项时,只需要将新的表单项数据添加到formItems数组中即可。
以上就是将antd-form-builder中的动态表单项