Vue前后台 json字符串与list集合转换 选择框输入框的添加和删除，传送多条数据更新和保存操作

场景：

页面可以添加多个联系人，与表单一起传送到后台存表作关联

1.首先实现点击添加按钮添加一条信息

1.1首先定义联系人数组

contantUser: [
          {
            contantType: '',
            contantName: '',
            contant: ''
          }
        ]

1.2联系人框

                  
                    
                      
                        
                          
                            
                          
                        
                      
                      
                        
                          
                        
                      
                      
                        
                          
                            +添加
                            删除

                        
                      
                    
                  
                  

1.3添加和删除一条记录

 // 添加参数
    add_parameter () {
      this.dataForm.contantUser.push({
        contantType: '',
        contantName: '',
        contant: ''
      })
    },
    // 删除参数
    del_parameter (index) {
      this.dataForm.contantUser.splice(index, 1)
    },

2.传送数据时转换为json格式

contantUser: JSON.stringify(this.dataForm.contantUser)

3.后台String接收，转换为list

List list = new ArrayList();
// contantUser 需要转的字符串，DoVendorContantEntity.class 需要转换成的实体类对象
        list =  JSONObject.parseArray(contantUser, DoVendorContantEntity.class);

4.遍历list插入数据，如果是更新操作，可以根据关联字段删除原有信息重新插入数据