前端动态表单的处理方法

背景：

类似于如下的表单的形式，如果我们提前知道了表单的key，那么我们就可以通过正常的处理表单形式，完成相关数据的获取。

但是，如果我们事先不知道表单的属性key值及对应的输入框还是select框, 那我们就得选择其他方式处理。

 

 步骤一：首先，我们约定，后台返回的格式如下：

其中，code字段的具体值为表单的key，type为到底是输入框还是选择框，name可以是表单的lable。

 

步骤二：根据返回的数据循环表单

 根据数据按如上的循环渲染方式，可将动态表单循环出来。

 

步骤三：拿到动态表单的相关数据后，我们需要遍历给表单赋初始值。

注意，此步骤一定要做，而且得赋初始值，即使初始值为空。否则会出现，输入框里面输入不到值进而拿不到值。而且得用  $set的方法，因为此块没有双向数据绑定的效果，必须使用$set 的方式来进行赋值。

 

步骤四：拿到form表单的值后，根据实际情况做进一步处理。

此块，我们就可以根据实际的需要进行进一步处理。