vue项目中如何提交表格数据

  今天做项目时碰到一个问题，前端提交数据时，需要提交整个表格; 在基于https://github.com/PanJiaChen/vue-element-admin/的vue模版进行开发时，post请求需要传递一个对象和 一个基本类型参数。
  最后经过尝试，参数的形式在api中应该写成（在此模版中测试发现如果post请求需要有请求体，即Requestbody，那么参数名必须为data）

1. 在.vue文件方法发起处：

// 此处为.vue中的方法发起处
// 浅拷贝
const table = Object.assign([], this.childTalbe)
updateChildList(table, checked.id)

  Object.assign()方法中以[]替换原有的{}以达到数组的效果，两者的对比效果如下：

Object.assign({},this.childTalbe)对应的结果：
{"list":{"0":{"id":12,"pid":10,"bm":null,"type":"1","mc":"委外厂商管理","css":null},"1":{"id":120,"pid":10,"bm":null,"type":"1","mc":"生产管理","css":null}},"id":10}

Object.assign([],this.childTable)对应结果：
{"list":[{"id":20326,"sjid":10,"bm":null,"type":"1","mc":"委外厂商管理","css":null},{"id":20327,"sjid":10,"bm":null,"type":"1","mc":"生产管理","css":null}],"id":10}，

同时表格数据在提交时不需要序列化，序列化的话,就会有如下效果"[{obj1}, {obj2}]"，即两端多出双引号。

2. 在前端api方法定义处：

// 此处为api中定义方法处
export function updateChildList(data, id) {
  return request({
    url: 'sys/role/update',
    method: 'post',
    data: { list: data, id: id }
  })
}

3. 后端在接收时，需要用map的形式来接：

 @PostMapping(value = "update")
 public ResponseResult<Void> updateChildList(@RequestBody Map<String,Object> params){
	 	Object object = params.get("list");
	    // 转化为Qx实体类集合
	    List<Qx> list = JSON.parseArray(JSON.toJSONString(object), Qx.class);
	    Integer sjid = (Integer) params.get("id");
 }

  此处从map中取得的object不能通过强转，直接转换为ArrayList<Qx>，强转是可以成功，但是从List中遍历的对象默认为ListkedHashMap结构，这一步没办法直接强转为Qx实体类，因而必须借助其他工具，可以从这里参考本文使用的是JSON.parseArray(JSON.toJSONString(object), Qx.class)，这种方法就可以将获取到的表格数据转换为实体类的ArrayList集合，进行后续操作了。