Elementui使用el-table+el-upload+箭头函数为每行数据上传图片_el-table和el-upload上传

最近在项目中遇到一个需求，使用el-table展示后台数据并且每一行都有3个字段需要能够上传图片，这个需求难在使用el-upload上传图片正常情况下只能对一个参数进行赋值，如何对n行、m列进行赋值是个问题。
先来看下正常情况下对一个参数赋值：

<el-upload class="uploadImg" :action="uploadAction()" name="file_name" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" :file-list="form.qa_android_picUrl" :on-preview="handlePictureCardPreview" :on-success="handleAvatarSuccess" :on-remove="handleRemove">
	<i class="el-icon-plus"></i>
</el-upload>
1
2
3

js方法：

handleAvatarSuccess(res, file, fileList) {
	this.$message.success('上传成功');
	// 这里将上传的图片赋值给参数（这里file是一个对象而非url，偷个懒没有去提取）
	this.form.qa_android_picUrl = fileList;
},
1
2
3
4
5

这样写的 handleAvatarSuccess无法根据当前行去对某一列赋值，更何况要对3个列赋值

解决方案：on-success属性使用箭头函数

<el-table-column prop="qa_android_picUrl" :label="'测试截图 \n （app-安卓）'" align="center" min-width="110px">
	<template slot-scope="scope">
		<el-upload class="uploadImg" :action="uploadAction()" name="file_name" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" :file-list="scope.row.qa_android_picUrl" :on-preview="handlePictureCardPreview" :on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, scope.row, 'qa_android_picUrl')" :on-remove="(file, fileList) => handleRemove(file, fileList, scope.row, 'qa_android_picUrl')">
			<i class="el-icon-plus"></i>
		</el-upload>
	</template>
</el-table-column>
<el-table-column prop="qa_ios_picUrl" :label="'测试截图 \n（app-IOS）'" align="center" min-width="110px">
	<template slot-scope="scope">
    	<el-upload class="uploadImg" :action="uploadAction()" name="file_name" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" :file-list="scope.row.qa_ios_picUrl" :on-preview="handlePictureCardPreview" :on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, scope.row, 'qa_ios_picUrl')" :on-remove="(file, fileList) => handleRemove(file, fileList, scope.row, 'qa_ios_picUrl')">
			<i class="el-icon-plus"></i>
		</el-upload>
	</template>
</el-table-column>
<el-table-column prop="qa_app_picUrl" :label="'测试截图 \n（app-小程序）'" align="center" min-width="110px">
	<template slot-scope="scope">
		<el-upload class="uploadImg" :action="uploadAction()" name="file_name" list-type="picture-card" accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" :file-list="scope.row.qa_app_picUrl" :on-preview="handlePictureCardPreview" :on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, scope.row, 'qa_app_picUrl')" :on-remove="(file, fileList) => handleRemove(file, fileList, scope.row, 'qa_app_picUrl')">
			<i class="el-icon-plus"></i>
		</el-upload>
	</template>
</el-table-column>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

js代码：

handleAvatarSuccess(res, file, fileList, row, col) {
	this.$message.success('上传成功');
	this.$set(this.form.events[row.event_index], col, fileList);
},
1
2
3
4

完美解决了我的需求！