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() 方法

Dreamweaver如何添加表单按钮 *** 作如下：

一、在Dreamweaver中插入表单按钮

1. 点击鼠标，将光标定位在表单框线内，点击“插入”菜单，选择“表单”项，在d出的子菜单中选择“按钮”命令。

或者在“插入”面板中选择“表单”项，点击“按钮”图标，如下图所示：

点击“窗口”菜单，选择“插入”项，可以打开“插入”面板。

2. 点击“按钮”图标后，d出“输入标签辅助功能属性”对话框。

3. 单击“确定”按钮，表单按钮出现在文档中。

4. 在文档中点击“按钮”表单控件，如下图所示：

5. 打开按钮“属性”面板，如下图所示：

按钮名称：为该按钮输入一个名称。name属性。

值：输入需要在按钮上出现的文本。value属性。

动作：选择“提交表单”，点击该按钮时提交表单以供处理(type="submit")选择“重设表单”，点击该按钮时重置表单(type="reset")选择“无”，点击该按钮时激活一个基于处理脚本的不同动作(type="button")。

提示：在表单的“动作”文本框中指定脚本或页面来处理表单。

二、提示

将光标定位到表单的红色虚线围成的框内，按回车(Enter)键，可以添加多个表单按钮。

---