问题场景

 

我们在一个列表中分别都需要有upload组件的时候也就涉及到了多个upload同时存在;

因为一般可以在success回调中拿到上传成功的图片已经成功的response,多个也可以,这个没毛病;

文档如下:

 平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

 

!!!但是,当多个同类型的upload同时存在的时候,我在怎么知道回调里面的fileList该与谁关联呢?

例如这种情况

平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

 

这两个甚至无数个“步骤”,对应的是vue data 里面的某个数组,如:

平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

图图
    },
    {
      图
    }    ]     }    

平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

假设这个时候我们点击第一个BOX里面的图片上传,然后拿到对应的对调参数,(response,file,fileList)

说白了,我不知道该把这个fileList给谁处理,是this.arr[0] , 还是 this.arr[1]。

 

一般项目中处理这种类似问题的时候是把对应的item通过这个函数传过来

如:

:on-success="handleProcedureSuccess(item)"

不过显然不行,如果我传实参了,那么组件内定义的几个参数就过不来了,覆盖了;

然后我就想这,我非得把当前item给传到这个方法里去,不然没法操作。

无奈····,改改改,经过我努力搜寻发现要修改这个文件

平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

在项目里面找到node_modules/element-ui/lib/element-ui.common.js

我们在props里面加一个要父组件传过来的参数,随便叫啥啦

平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

然后继续往下找到,this.onSuccess的执行地点,加上这个参数

 平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

好了这里改好了,再到我们的页面里,写组件的时候多传个参数,我这里传的是数组的索引

平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

 

 OK啦,再然后在success回调的时候就会多出一个参数,就是我们传进去这个自定义的值啦

平面设计培训,网页设计培训,美工培训,游戏开发,动画培训

由此,用第四个参数去决定你处理的是第几个数组元素。

http://www.cnblogs.com/AlexBlogs/p/7150532.html