vue动态增减表格表单，后端(java)接受请求解析相应信息

初始表格有一行，全部都是空的，点击增加按钮增加一行，提交表单时提交整个表格数据至后端，后端解析该结构体数组为对应实体类。
不多说，代码:

<template>
	<div>
		<el-table :data="appointForm,Data">
			<el-table-column prop="startTerm" label="开始期数" align="center">
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.startTerm" :controls="false" :step="1" step-strictly />
				</template>
			</el-table-column>
			<el-table-column prop="endTerm" label="结束期数" align="center">
				<template slot-scope="scope">
					<el-input-number v-model="scope.row.endTerm" :controls="false" :step="1" step-strictly />
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="danger" @click="deleteAppoint(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-clumn>
		</el-table>
		<div class="footer">
			<el-button type="primary" @click="saveAppoint">保存</el-button>
			<el-button type="primary" @click="addAppoint">新增</el-button>
		</div>
	</div>
</template>
<script>
	export default{
		data() {
			appointForm: {
				Data: [
					{
						startTerm: 1,
						endTerm: 1,
					},
				],
			},
		},
		methods: {
			deleteAppoint(index,row) {
				this.appointForm.Data.splice(index,1);
			},
			saveAppoint(){
				let params = {
					data: JSON.stringify(this.appointForm.Data),
				};
				saveAppointList(params).then(res => {
					//根据后端返回结果不同处理方法
				});
			},
			addAppoint() {
				let row= {
					startTerm = this.appointForm.Data[this.appointForm.Data.length - 1].endTerm + 1,
					endTerm = this.appointForm.Data[this.appointForm.Data.length - 1].endTerm + 1,
				};
				this.appointForm.Data.push(row);
			},
		},
	}
</script>

前端代码部分结束，那个slot-scope的语法在vue2.0+好像替换成了v-slot,3.0+里面好像给废弃了，需要注意
后端代码，解析+存库，后端代码就简单了，重要的就是那个JSON串的解析

public ResultDto saveAppointList(String,data) {
	List<SmnAppoint> smnAppointList = JSONArray.parseArray(data, SmnAppoint.class);
	//数据库操作
}

后端用的包为com.alibaba.fastjson.JSONArray
用这个包方便很多，直接将传过来的JSON串转换为想要的结构体List