vue 循环子组件上传

效果

循环添加商品参数图片

实现

html

 <el-row
   :gutter="20"
   v-for="(item, index) in addForm.goods_parameter"
   :key="index"
 >
	<el-col :span="6">
	  <el-form-item>
	    <el-input
	      placeholder="请输入商品参数名"
	      v-model="item.parameter_name"
	    ></el-input>
	  </el-form-item>
	</el-col>
	<el-col :span="6">
	  <el-form-item>
	    <el-input
	      placeholder="请输入商品参数值"
	      v-model="item.parameter_val"
	    ></el-input>
	  </el-form-item>
	</el-col>
	<el-col :span="6">
	  <Upload
	    @success="
	    //主要是这里的代码，Upload是引入的组件
	    //普通子组件给父组件传值只能携带一个value值，但是此处要将图片上传对应的位置中
	      (...goodsParameterPath) => {
	        goodsParameterSuccess(...goodsParameterPath, index);
	      }
	    "
	    :img="item.parameter_path"
	  ></Upload>
	</el-col>
	<el-col :span="4">
	  <el-button
	    type="primary"
	    icon="el-icon-plus"
	    circle
	    @click="parameterAdd(index)"
	  ></el-button>
	  <el-button
	    type="danger"
	    icon="el-icon-delete"
	    circle
	    @click="parameterDel(index)"
	    v-if="addForm.goods_parameter.length > 1 && index !== 0"
	  ></el-button>
	</el-col>
</el-row>

js

	goodsParameterSuccess(res, index) {
	//res就是返回的图片路径，index就是对应数组的索引
	   this.addForm.goods_parameter[index].parameter_path = res;
	 },