Vue-结合Element UI实现表单动态增删行

背景

​ 有时候表单中的字段、或者某一个字段中以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
}

至此就完成了一个简单的动态表单的实现，将需要的数据结构处理后传给后端即可。