vue表单数据添加到表格当中出现的问题

发布时间 2023-11-16 16:04:42作者: 锴‘

表单样式如下

填写完表单之后点击确认新增按钮,表格会自动新增一行数据对应刚刚表单当中填写的数据。

this.tableData.push(this.formData);
这行js代码可以实现将表单数据添加到表格当中。
但由于我在点击按钮的动作当中添加了
this.$refs[formName].resetFields();
这行重置表单当中数据的代码。
执行完毕之后发现表格当中出现了一行空行。
 
原因:form表单当中的数据是通过v-model绑定过了的
this.$refs[formName].resetFields();这行代码将model当中的数据重置回默认值
this.tableData.push(this.formData);这行代码的作用应该也是将表格当中新增行的数据与model绑定在一起,所以在重置表单之后,出现的是一行空行
 
解决方法:
一、通过数据库存储数据,即通过springboot获取数据

二、前端方法目前不知道