热门标签
热门文章
- 1我30岁，为高薪转行当程序员，第一份工作月薪7500_30岁成为一名程序员
- 2ROS入门教程（六）—— Gazebo仿真
- 3【数据结构】AVL平衡二叉树底层原理以及二叉树的演进之多叉树_平衡二叉树的数学原理
- 4工厂设备数字化
- 5uni-app课程心得_如果 nvue 页面 @animationfinish 事件不能返回正确的数据,可同时监听 @cha
- 6TCP/IP协议族中的TCP（一）：解析其关键特性与机制
- 7蓝桥杯——松散子序列
- 8STM32F103RCT6开发板M3单片机教程03--usart串口通信_stm32f103rct6 串口
- 93.RabbitMQ UI管理界面使用（用户、虚拟主机）_rabbitmq management ui
- 10搭建神经网络（一）
当前位置: article > 正文
elementUi,table,upload每行上传不同图片_一个table可以任选一行上传图片吗
作者：AllinToyou | 2024-05-17 14:51:28
赞
踩
一个table可以任选一行上传图片吗
elementUI-table每行上传不同图片
//在表格的某一行都有一个点击上传图片的按钮,点击按钮弹出dialog弹框,在弹框中使用upload组件上传图片 </el-table> <el-table-column label="图片" width="150px" align="center"> <template slot-scope="scope"> <el-button type="text" @click="handleClick(scope.row)">上传图片</el-button </template> </el-table-column> </el-table> <!-- 上传图片对话框 --> <el-dialog title="上传图片" :visible.sync="uploadQcVisible" @closed="closePic"> <el-upload :key="timer" :action="uploadFileUrl" list-type="picture-card" :file-list="uploadFileList" :on-remove="handleRemove" :on-success="handleSuccss" multiple > <i class="el-icon-plus" /> </el-upload> </el-dialog> //:key='timer' 定义一个timer变量 是为了重载组件使用 //点击上传,打开对话框,此时暂存row数据 handleClick(row){ //打开对话框 this.uploadQcVisible = true //定义全局变量接收row,row代表表格每一行的数据,每一行的row对象下边有一个piclist数组来存放上传的图片 this.tempObj = row //判断row.piclist是否已经传过数据 if(row.piclist.length !== 0){ this.uploadFileList = Object.assign([],row.piclist) } } // 上传成功,push到当前行的piclist数组中 handleSuccss(res, file, fileList) { this.tempObj.piclist.push({ name: file.name, url: res.data, status: file.status, uid: file.uid }) }, //关闭对话框时,重载组件,并且把uploadFileList清空,否则会有异常 closePic() { this.timer = new Date().getTime() this.uploadFileList = [] }, // 移除图片 handleRemove(file, fileList) { this.tempObj.piclist = Object.assign([], fileList) },
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/584057
推荐阅读
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
