vue el-table表格中每行上传文件(上传简历)操作

1、HTML中

 <el-table :data="formInfo.userListDto" border stripe max-height="400">
	 <el-table-column type="index" label="序号" width="50"> </el-table-column>
	 <el-table-column prop="realName" label="姓名" show-overflow-tooltip></el-table-column>
	 <el-table-column prop="birthday" label="出生年月" show-overflow-tooltip></el-table-column>
	 <el-table-column prop="orgName" label="所在单位" show-overflow-tooltip></el-table-column>
	 <el-table-column prop="postName" label="职务" show-overflow-tooltip></el-table-column>
	 <el-table-column prop="jobRankName" label="职级" show-overflow-tooltip></el-table-column>
	 <el-table-column prop="jobExpertiseName" label="工作专长" show-overflow-tooltip></el-table-column>
	 <el-table-column prop="" label="操作" width="700">
	   <template slot-scope="scope">
	     <el-upload
	       ref="upload"
	       class="upload-demo"
	       action="#"
	       :on-change="
	         (file, fileList) => {
	           handleChange(file, fileList, scope)
	         }
	       "
	       :on-remove="
	         (file, fileList) => {
	           handleRemove(file, fileList, scope)
	         }
	       "
	       :limit="1"
	       :on-exceed="handleExceed"
	       :auto-upload="false"
	     >
	       <span class="opera-img">上传简历</span>
	     </el-upload>
	   </template>
	 </el-table-column>
</el-table>

在这里插入图片描述

2、JS中

 //监控上传文件列表
handleChange(file, fileList, scope) {
  this.formInfo.userListDto[scope.$index].fileIdList.push(file.name)
},
handleRemove(file, fileList, scope) {
  this.formInfo.userListDto[scope.$index].fileIdList = []
},
handleExceed() {
  this.$tips.tipWarning(`个人简历只能上传一个文件`)
},

3、注意点

1、通过scope把上传的文件和表格中的行一一对应
2、上传后要把返回的数据push到表格数组中,删除后要把表格数组中的数据删除

展示:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/199745.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Udemy】AWS CLF - 01 题库 (英文版 + 中文版)目录

【挑战业余一周拿证】CSDN官方课程目录 【挑战业余一周拿证】AWS 认证云从业者 薅200美金羊毛 一、介绍 文章记录题库&#xff08;包含答案解释中文翻译&#xff09; 共计23章&#xff0c;每天更新 2-10 章习题&#xff0c;需要的客观请点赞收藏 来源Udemy&#xff0c;刷题…

Docker容器常用命令

文章目录 启动类命令帮助类命令镜像命令列出本地主机上的镜像在远程仓库中搜索镜像下载镜像保存镜像加载 tar 包为镜像查看占据的空间删除镜像 虚悬镜像命令自动补全新建启动容器启动交互式容器启动守护式容器 列出正在运行的容器容器其他启停操作启动已经停止的容器重启容器停…

【jupyter notebook中插件 nbextensions 安装失败分析与解决方法】

文章目录 问题描述分析与解决总结 问题描述 一开始在安装 notebook 中的插件 nbextensions 时根本没有注意到版本的适配问题&#xff0c;都是进行默认的安装&#xff0c;结果安装是最新版本的 notebook7.x&#xff0c;恰好 notebook7.x 版本不再适应插件 nbextensions&#xf…

智能优化算法应用:基于头脑风暴算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于头脑风暴算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于头脑风暴算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.头脑风暴算法4.实验参数设定5.算法结果6.参考…

大数据平台/大数据技术与原理-实验报告--部署ZooKeeper集群和实战ZooKeeper

实验名称 部署ZooKeeper集群和实战ZooKeeper 实验性质 &#xff08;必修、选修&#xff09; 必修 实验类型&#xff08;验证、设计、创新、综合&#xff09; 综合 实验课时 2 实验日期 2023.11.04-2023.11.05 实验仪器设备以及实验软硬件要求 专业实验室&#xff08…

leetcode:用栈实现队列(先进先出)

题目描述 题目链接&#xff1a;232. 用栈实现队列 - 力扣&#xff08;LeetCode&#xff09; 题目分析 我们先把之前写的数组栈的实现代码搬过来 用栈实现队列最主要的是实现队列先进先出的特点&#xff0c;而栈的特点是后进先出&#xff0c;那么我们可以用两个栈来实现&…

flask 上传文件

from flask import Flask, request, render_template,redirect, url_for from werkzeug.utils import secure_filename import os from flask import send_from_directory # send_from_directory可以从目录加载文件app Flask(__name__)#UPLOAD_FOLDER media # 注意&#xff…

大数据——一文详解数据仓库概念(数据仓库的分层概念和维度建模详解)

1、ods是什么&#xff1f; ods层最好理解&#xff0c;基本上就是数据从源表拉过来&#xff0c;进行etl&#xff0c;比如MySQL映射到Hive&#xff0c;那么到了Hive里面就是ods层。ods全称是 Operational Data Store&#xff0c;操作数据存储——“面向主题的”&#xff0c;数据…

实战Flask+BootstrapTable最实用服务端分页查询动态表头及数据(ajax方式)

看到这篇文章的朋友们是幸运的,我用了很久才实战出如下结果,且行且珍惜,祝好! 话不多说,有图有源码 1.看图,实现服务端动态表头数据,分页,查询,排序 1.数据准备 CREATE TABLE goods (id int(11) NOT NULL AUTO_INCREMENT,name varchar(255) DEFAULT NULL COMMENT 商品名,no …

运算放大器(五):V-I 转换器

1、高侧电压至电流&#xff08;V-I&#xff09;转换器 下图显示的电路是高侧电压至电流(V-I) 转换器。可将 0 V 至 2V 的输入电压转换为 0mA 至 100mA 的输出电流 其测量转换函数如下图所示&#xff1a; 可利用该电路搭建恒流源电路&#xff0c;如下图仿真电路所示&#xff08…

Linux 调试工具:gdb

调试复习 调试可谓是 “贯穿” 了程序员的一生&#xff0c;调试的重要性&#xff0c;就不再赘述啦&#xff01;如果你还不知道什么是调试&#xff0c;可以看看 Windows 系统的 Visual Studio 是如何调试的&#xff1a;➡️ visual stuudio 使用调试技巧 下载调试软件 gdb yu…

MaskDINO环境搭建与模型测试

1、环境搭建 1、构建虚拟环境安装torch conda create -n mmdetsam python3.8 -y conda activate mmdetsampip install torch1.10.0cu102 torchvision0.11.0cu102 torchaudio0.10.0 -f https://download.pytorch.org/whl/torch_stable.html -i http://mirrors.aliyun.com/pypi…

【开题报告】基于深度学习的驾驶员危险行为检测系统

研究的目的、意义及国内外发展概况 研究的目的、意义&#xff1a;我国每年的交通事故绝对数量是一个十分巨大的数字&#xff0c;造成了巨大的死亡人数和经济损失。而造成交通事故的一个很重要原因就是驾驶员的各种危险驾驶操作行为。如果道路驾驶员的驾驶行为能够得到有效识别…

跳动的文字(文字渲染).html( 网上收集的1)

<!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>跳动的文字</title><style>#m1:hover {animation: shine 1s linear infinite;}keyframes shine {0% {color: #fff;}50% {color: #0000ff;}100% {color: #fff;}…

C语言错误处理之 “信号处理方式<signal.h>及signal函数等内置函数”

目录 前言 signal.h头文件 信号宏 signal函数 实例&#xff1a;在Linux环境下验证signal函数 实例&#xff1a;在Linux中演示保存signal函数的返回值 预定义的信号处理函数&#xff08;简单了解&#xff09; SIG_DFL函数 SIG_IGN函数 raise函数 实例&#xff1a;测试…

电气制图用什么软件?CAD和Eplan哪个更胜一筹?

身为电气工程师&#xff0c;每天打交道最多的可能不是自家对象&#xff0c;而是时时刻刻攥在手里的电气图。目前市面上制作电路图的软件形形色色&#xff0c;但是AutoCAD Electrical和Eplan是目前大家使用率最高的两款电气制图软件。 EPLAN是一款专业的电气设计软件&#xff0…

为什么Redis这么快?5分钟成为Redis高手

Redis简介 Redis 是 C 语言开发的一个开源高性能键值对的内存数据库&#xff0c;可以用来做数据库、缓存、消息中间件等场景&#xff0c;是一种 NoSQL&#xff08;not-only sql&#xff0c;非关系型数据库&#xff09;的数据库。 Redis特点 优秀的性能&#xff0c;数据是存储…

C++学习之路(十)C++ 用Qt5实现一个工具箱(增加一个时间戳转换功能)- 示例代码拆分讲解

上篇文章&#xff0c;我们用 Qt5 实现了在小工具箱中添加了《JSON数据格式化》功能&#xff0c;还是比较实用的。为了继续丰富我们的工具箱&#xff0c;今天我们就再增加一个平时经常用到的功能吧&#xff0c;就是「 时间戳转换 」功能&#xff0c;而且实现点击按钮后文字进行变…

Java基础之原码,反码,补码,位运算符

文章目录 前言一、二进制在运算中介绍二、原码&#xff0c;反码&#xff0c;补码&#xff08;针对有符号的&#xff09;三、位运算符按位与&按位或 |按位异或 ^按位取反 ~算术右移>>算术左移<<逻辑右移>>> 总结 前言 原码&#xff0c;反码&#xff0…

数字人透明屏幕的技术原理是什么?

数字人透明屏幕的技术原理主要包括人脸识别和全息影像技术。其中&#xff0c;人脸识别技术是通过摄像头捕捉游客的面部表情和动作&#xff0c;并将其转化为数据指令&#xff0c;以便与数字人物进行互动。而全息影像技术则是利用透明屏幕&#xff0c;通过全息投影的方式将数字人…