vue 动态添加 多项目 表单_Vue中动态增加表单项的方法
在我的项目中遇到了两种动态增加表单项的场景，一种是对Form的添加，另外一种是对Table的添加。当初实现这两种时还有一点喜悦，现在回过头来看，发现这两种实际就是一种，以后就可以根据个人喜好选择了。动态增加Form表单这里因为要添加的表单项存在着父子关系，要添加的子代很多，而父代属性又一致，用这种方式可以减少重复操作。表单样式就不再赘述了，具体看图image.png点击添加要素按钮，就可以添加一个
在我的项目中遇到了两种动态增加表单项的场景，一种是对Form的添加，另外一种是对Table的添加。当初实现这两种时还有一点喜悦，现在回过头来看，发现这两种实际就是一种，以后就可以根据个人喜好选择了。
动态增加Form表单
这里因为要添加的表单项存在着父子关系，要添加的子代很多，而父代属性又一致，用这种方式可以减少重复操作。表单样式就不再赘述了，具体看图
image.png
点击添加要素按钮，就可以添加一个新的要素表单出来，
image.png
实现方案如下：
1、将需要动态增加的表单部分写在一个
这里tab就是我们每次添加子表单时要push进数组tabs的内容。
2、为添加要素按钮绑定一个 addTab()方法，用于在每次添加子表单时，向数组中push一个元素
addTab() {
this.formData.tabs.push({
tabId: "",
fieldId: "",
});
}
3、对表单项的编写与正常一样，只不过在数据绑定上不同，需绑定到tab中的元素
4、如果要删除多余tab，需要在
removeTab(item) {
let index = this.formData.tabs.indexOf(item);
if (index !== -1) { //当没有多余tab时就不再删除
this.formData.tabs.splice(index, 1)
}
}
动态增加Table
这里的table也是存在父子关系，只是展示形式的区别。因为后台的数据还有着展示的需要，所以才选用了表格这种形式来实现。
1、将table组件声明在一个标签下，用以根据后台数据进行动态加载。
:data="articleList" //数据绑定
2、对表格中需要编辑的内容，可以在标签下声明一个输入框，并使用插槽来实现数据的绑定。
3、与上面相同的，声明一个addRow()的方法，用于增加表格的行数。
addRow(tableData) {
tableData.push({
id: "",
showNo: "",
article: "",
isNew: "y"
})
}
4、删除不想要的行，需要对应增加一个deleteRow()方法
deleteRow(index,row,rows){
rows.splice(index,1)
}
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)