vue项目动态表单+上传图片

效果图

 

 模板

      <el-form ref="modifyParametersForm" :inline="true" :model="modifyParametersForm" >

        <!-- 动态增加项目 -->

        <div v-for="(item, index) in modifyParametersForm.params"  :key="index">
          <el-form-item :label="'参数名' + (index+1)" :prop="'params.' + index + '.paramName'" :rules="{
                    required: true, message: '参数名不能为空', trigger: 'blur'
                }">

            <el-input v-model="item.paramName"></el-input>
          </el-form-item>
          <el-form-item :label="'参数值' + (index+1)" :prop="'params.' + index + '.paramValue'" :rules="{
                    required: true, message: '参数值不能为空', trigger: 'blur'
                }">
            <el-input v-model="item.paramValue"></el-input>
          </el-form-item>



         <el-upload
            class="avatar-uploader"
            action="/dev-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="(value)=> handleAvatarSuccess(index, value)"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="item.url" :src="item.url" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>


          <el-form-item>
            <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
          </el-form-item>
        </div>
      </el-form>

data数据

      modifyParametersForm: {

        pvaId: '',

        params: [ ]
},

添加和删除

      addItem() {
       this.modifyParametersForm.params.push({
          paramName: '',
          paramValue: '',
          url:''
        })
      },
      // 删除一组输入框
     deleteItem(item, index) {
       this.modifyParametersForm.params.splice(index, 1)
     },

上传图片

    handleAvatarSuccess(i, value) {
      this.modifyParametersForm.params[i].url=value.data;
    },