vue动态form表单(vueform表单提交)
请教个vue动态生成form表单，表单里有单选项radio？
例子:
每次动态生成elradios数组 如:['a','b','c','d','e']
el-radio-group v-model="elradios_selected"
el-radio v-for="i in elradios" :label="i" /
/el-radio-group
动态表单的设计与实现（基于Vue ElementUI）
在xxx信息管理这种业务场景中我认为最常见的操作就是对字段的处理(例如查询、编辑等区域的表单、图表的列名、表格的列名)，而字段恰恰是最为 '规范的'，它有自己的名称、类型
用对象或者说map这种结构而不用数组是为了可以精准对某个字段进行设置 而数组需要先遍历查找到这个字段再进行设置
可通过 formData 这个外部传入的对象来对数据进行统一的设置与读取
例如有的字段可以查询但不能编辑，我们可以引入一个场景的概念就可以轻易解决这个问题
名称既可以显示又可以编辑与查询而性别只能编辑与查询但不能显示，useScene是使用场景如果字段不支持这个场景那么字段不予显示(可自行实现禁用场景)
重点就在于m_canUse的实现，它用eval取巧的实现了一个场景逻辑字符串转布尔值的一个骚操作
看到这里可能有的朋友会很不解，为什么我要构造一个如此复杂的useScene,直接定义 canUpdate canQuery 这种布尔值变量来指定场景不就行了吗?
实际上需求是非常复杂多变的，场景可以说是无限的甚至是相互交织关联的、我们可能会根据用户的操作动态显示字段的显示隐藏，例如提交后显示提交人、提交时间等字段、撤销了就不予显示
我们可以在用户做某些操作时来动态设置sceneMap的状态来达到控制表单的显示、隐藏、禁用，当状态越复杂时你就越能感觉到它的威力
可以在动态表单内部监听表单的事件(可查阅相关UI库文档)、当表单事件触发时对外传递事件(携带当前操作的字段信息、$event信息或arguments)
有时我们想在任意两个字段之间插入一个非通用的ui组件，我们可以通过具名插槽来实现
这是一个动态表单的简易实现，需要大家结合自身的业务场景去填充各种各样的表单和相关的参数、事件
怎样利用Vue动态生成form表单
$formCreate 参数
rules?表单生成规则 [inputRule,selectRule,...]
options?初始化配置参数 (详细见底部 createOptions)
$formCreate.maker 组件规则生成器
除hidden外,其他配置方式全部相同.详细参考表单元素规则
props,event,slot传入参数为对象,例({key:value,...})
validate,options参入参数为数组,例([options,options,..])
hidden?生成隐藏字段
1? ?$formCreate.maker.hidden(field,value)? ?
input?生成input输入框
1? ?$formCreate.maker.input(title,field,value)? ?
radio?生成单选框
checkbox?生成复选框
select?生成select选择器
switch?生成switch开关
datepicker?生成日期选择器组件,别名date
timepicker?生成时间选择器组件,别名time
inputnumber?生成数字输入框,别名number
colorpicker?生成颜色选择器组件,别名color
cascader?生成多级联动组件
upload?生成上传组件
rate?生成评分组件
slider?生成滑块组件
$f 实例方法
formData()?获取表单的value
getValue(field)?获取指定字段的value
changeField(field,value)?修改指定字段的value
resetFields()?重置表单
destroy()?销毁表单
removeField(field)?删除指定字段
fields()?获得表单所有字段名称
submit()?表单验证通过后提交表单,触发onSubmit事件
validate(successFn,errorFn)?表单验证,如果验证通过执行successFn,未通过则执行errorFn
validateField(field,callback)?表单验证指定字段
Vue中动态增加表单项的方法
在我的项目中遇到了两种动态增加表单项的场景，一种是对Form的添加，另外一种是对Table的添加。当初实现这两种时还有一点喜悦，现在回过头来看，发现这两种实际就是一种，以后就可以根据个人喜好选择了。
这里因为要添加的表单项存在着父子关系，要添加的子代很多，而父代属性又一致，用这种方式可以减少重复操作。表单样式就不再赘述了，具体看图
这里 tab 就是我们每次添加子表单时要push进数组tabs的内容。
2、为添加要素按钮绑定一个 addTab() 方法，用于在每次添加子表单时，向数组中push一个元素
3、对表单项的编写与正常一样，只不过在数据绑定上不同，需绑定到tab中的元素
4、如果要删除多余tab，需要在 div 中声明一个 removeTab() 的方法，来删除对应的tab，这点区别于 addTab() ，它是定义在 div 之外的，每次新增的tab都会插到整个表单的末尾。
这里的table也是存在父子关系，只是展示形式的区别。因为后台的数据还有着展示的需要，所以才选用了表格这种形式来实现。
1、将table组件声明在一个 template 标签下，用以根据后台数据进行动态加载。
2、对表格中需要编辑的内容，可以在 template 标签下声明一个输入框，并使用插槽来实现数据的绑定。
3、与上面相同的，声明一个 addRow() 的方法，用于增加表格的行数。
4、删除不想要的行，需要对应增加一个 deleteRow() 方法