效果图
模板
<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;
},