场景:
页面可以添加多个联系人,与表单一起传送到后台存表作关联
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);