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

场景：

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

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

1.1首先定义联系人数组

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

1.2联系人框

<el-col :span="24">
                  <el-col
                    v-for="(parameter ,index)  in dataForm.contantUser "
                    :key="parameter.key"
                    style="width: 100%;"
                  >
                    <el-col style="width:100%">
                      <el-col :span="7">
                        <el-form-item
                          label="联系人类型"
                          :prop="'contantUser.'+index+'.contantType'"
                          :rules="[{ required: true,message: '联系人类型不能为空', trigger: 'blur' }]"
                        >
                          <el-select
                            v-model="parameter.contantType"
                            v-bind:disabled="showEdit"
                            filterable
                            placeholder="请选择"
                            style="width:100%"
                          >
                            <el-option
                              v-for="item in userData"
                              :key="item.title"
                              :label="item.title"
                              :value="item.basicValue"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="6">
                        <el-form-item
                          label="联系人名称"
                          :prop="'contantUser.'+index+'.contantName'"
                          :rules="[{ required: true,message: '联系人名称不能为空', trigger: 'blur' }]"
                        >
                          <el-input
                            v-model="parameter.contantName"
                            v-bind:disabled="showEdit"
                            placeholder="联系人名称"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="11">
                        <el-form-item
                          label="联系方式"
                          :prop="'contantUser.'+index+'.contant'"
                          :rules="[{ required: true,message: '联系方式不能为空', trigger: 'blur' }]"
                        >
                          <el-input
                            v-model="parameter.contant"
                            v-bind:disabled="showEdit"
                            style="width: 150px"
                            @blur="checkNumber(parameter.contant)"
                            placeholder="联系方式"
                          ></el-input>
                            <el-button @click="add_parameter" size="small" type="text" v-if="show">+添加</el-button>
                            <el-button
                              size="small"
                              type="text"
                              v-if="show"
                              @click="del_parameter(index)"
                              :disabled="index<1"
                            >删除</el-button>

                        </el-form-item>
                      </el-col>
                    </el-col>
                  </el-col>
                  </el-col></el-row>

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<DoVendorContantEntity> list = new ArrayList<DoVendorContantEntity>();
// contantUser 需要转的字符串，DoVendorContantEntity.class 需要转换成的实体类对象
        list =  JSONObject.parseArray(contantUser, DoVendorContantEntity.class);

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