java实现动态表单_Ant Design 中“动态表单”示例

动态表单

复杂的后端管理系统，逃不掉表单项的动态增减，结合 Antd 就会有这几个问题：

怎么在已经写好的 Form 表单中，增添新的表单元素？

怎么友好的添加新表单字段？甚至是一批字段？

这些字段怎么纳入原先的 validate 校验体系？

我参考官网的 动态增减表单项-示例 ，再“绞尽脑汁”准备了还算过得去的 demo。

下面看下效果图，同时我会做简单的说明：

如何动态添加元素？

往页面上添加元素到是不难，现在前端框架都是基于数据驱动的。

所以只要维护一个(数组)变量(例中为：dynamicGroup)，然后根据修改逻辑，往这个数组中增减元素，最后通过 v-for 动态渲染出对应的表单标签即可。

复制代码

怎么友好添加新的表单字段？

在 dynamicGroup 动态元素集合中，我放的是“一批”动态的字段 dynamicFields(也是数组类型)。

// data

{

dynamicGroup: [],

dynamicFields: [

{

fieldName: 'username',

//...

},