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

表单样式如下

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

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获取数据

二、前端方法目前不知道