element-ui upload组件 添加自定义参数

在使用element-ui的时候,在后台的列表中需要循环添加上传口。但是element自带的回调方法只有两个参数,而我需要在回调方法中添加一个标识参数来区分当前上传后的结果来绑定。

列表中使用上传组件.png

最开始的想法是按照

<el-table-column prop="price" label="封面图" width="220">
    <template slot-scope="scope">
    <el-upload class="poster-uploader"
    :action="imgUploadUrl" :show-file-list="false" 
    :on-success="handleBannerSuccess"
    :before-upload="beforeBannerUpload">
    <img v-if="scope.row.banner" :src="scope.row.banner" class="upload-banner">
                                
    <div v-else slot="trigger" class="u<pload-placeholer">上传封面</div>                        
      </el-upload>
  </template>
</el-table-column>

查看文档,参数的返回值有:
on-success 文件上传成功时的钩子 function(response, file, fileList)
然后尝试如下写法,

:on-success="handleBannerSuccess(index, $event)"

发现并不对。然后想起来这个是传入的回调函数,而不是一个监听事件。
如果是@on-success倒可以这个处理参数。
而现在参数是一个回调函数,那么就修改这个函数:

:on-success="function (res, file) { return handleBannerSuccess(res, file, scope.$index)}"
handleBannerSuccess(response, file, index) {
  console.log(response, file, index);
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容