背景
有时候表单中的字段、或者某一个字段中以JSON传输到后端处理，这时候对其变量赋值就存在不确定性，值可能一个、可能两个、可能多个，具体根据使用者具体场景决定，这时候就需要采用动态增删来处理。
效果预览
比如我这里做了一个管理系统对接友盟推送消息的功能，这里的扩展参数就存在不确定性，根据不同的推送模式、不同的打开操作和内容、会产生不同的扩展参数，这里就采用动态增删模式来解决。(当然，如果功能都是固定的，也可以根据你们自己不同的操作确定下来参数把表单写死，但是不建议)。
具体实现
Vue部分
<el-form-item label="扩展参数:">
<div>
<el-button size="mini" type="text" icon="el-icon-plus" @click="addExtraInput">添加一行</el-button>
<el-popover
placement="top-start"
title=""
width="500"
trigger="hover">
<el-alert
title="打开APP相关操作指南"
type="info"
:closable="false">
<template slot='title'>
<!--这里面是对不同场景下扩展参数的自定义说明-->
</template>
</el-alert>
<i slot="reference" style="margin-left: 5px" class="el-icon-info"></i>
</el-popover>
</div>
<div v-if="extraList && extraList.length > 0">
<el-alert title="" type="info" :closable="false" :show-icon="false">
<template slot='title'>
<!--遍历数组，根据不同的结构，展现表单样式、一行单个或者多个输入框，具体看自己实现，这里是一行对应一个键值对-->
<div v-for="(item,index) in extraList" :key="index" style="margin-top: 5px">
<el-input style="width: 218px" v-model="item.key" placeholder="key"></el-input>
<el-input style="width: 218px" v-model="item.value" placeholder="value"></el-input>
<el-button size="mini" type="text" icon="el-icon-delete" style="color: #F56C6C"
@click="delExtraInput(index)">删除
</el-button>
</div>
</template>
</el-alert>
</div>
</el-form-item>
Js部分
/** 添加一行键值对 */
addExtraInput() {
this.extraList.push({ 'key': '', 'value': '' })
}
/** 根据数组索引删除一行键值对 */
delExtraInput(index) {
this.extraList.splice(index, 1)
}
/** 将参数列表提取出来 转换为对象形式 */
extraListToData() {
let extraList = this.extraList
if (!extraList || extraList.length < 1) {
return {}
}
let extraData = {}
for (let item of extraList) {
let key = item.key
let value = item.value
if (key && value) {
extraData[key] = value
}
}
return extraData
}
至此就完成了一个简单的动态表单的实现，将需要的数据结构处理后传给后端即可。
Q.E.D.