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

news2024/11/20 19:48:20

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到表格数组中,删除后要把表格数组中的数据删除

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

filebeat 日志收集工具

elk&#xff1a;filebeat日志收集工具和logstash相同。 filebeat是一个轻量级的日志收集工具&#xff0c;所使用的系统资源比logstash部署和启动时使用的资源要小的多。 filebeat可以运行在非Java环境。他可以代理logtash在非java环境上收集日志。 filebeat无法实现数据的过…

Edge浏览器的跨域设置

关闭安全策略 复制一个浏览器的快捷方式&#xff0c;修改它的目标信息 在目标路径后加上这段命令&#xff1a;" --disable-web-security --user-data-dirD:/edgeCros" 没有引号&#xff0c;注意空格&#xff0c;D:/edgeCros是自定义文件夹&#xff0c;用来存放数据 …

神经网络:脑科学中功能MRI成像的应用及其一些相关概念

文章目录 一、MRI成像简介核磁共振成像&#xff08;MRI&#xff09;侵入式成像功能磁共振成像&#xff08;fMRI&#xff09;血氧水平依赖&#xff08;BOLD&#xff09;效应对比基线状态代理指标 二、fMRI具有延迟性及其解决方案原因解决方法 三、fMRI 数据处理1. 数据预处理2. …

2020年3月2日 Go生态洞察:Go协议缓冲区的新API发布

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

看懂YOLOv7混淆矩阵的含义,正确计算召回率、精确率、误检率、漏检率

文章目录 1、准确率、精确率、召回率、误报率、漏报率概念及公式1.1 准确率 Accuracy1.2 精确率 Precision1.3 召回率 Recall1.4 F1-Score1.5 误检率 false rate1.6 漏检率 miss rate 2、YOLOv7混淆矩阵分析 1、准确率、精确率、召回率、误报率、漏报率概念及公式 重点参考博文…

堆结构的应用:随时取得数据流中的中位数

大根堆和小根堆配合 实现 第一个数字直接入大根堆 对于后面的数字&#xff0c; 如果数字 < 大根堆的堆顶&#xff0c;这个数字入大根堆 否则入小根堆 在数字入堆的同时&#xff0c;进行大根堆与小根堆的大小的比较&#xff0c;一旦它们两个的大小之差 2&#xff0c;较大…

kernel32.dll动态链接库报错解决方法,提供四种解决kernel32.dll报错的方法

当我们的电脑出现"kernel32.dll是无法找到的"或者"缺少kernel32.dll"这样的错误提示时, 则样的提示都是属于kernel32.dll动态链接库报错&#xff0c;出现这样的错误提示窗口&#xff0c;就说明程序无法成功读取到该动态链接库文件。本篇文章就给大家提供四…

Android flutter项目 启动优化实战(二)利用 App Startup 优化项目和使用flutterboost中的问题解决

背景 书接上回&#xff1a; Android flutter项目 启动优化实战&#xff08;一&#xff09;使用benchmark分析项目 已经分析出了问题: 1.缩短总时长&#xff08;解决黑屏问题、懒启动、优化流程&#xff09;、2.优化启动项&#xff08;使用App Startup&#xff09;、3.提升用…

经济观察与ChatGPT聊了聊 :OpeoAI 的144个小时到底发生了什么

本心、输入输出、结果 文章目录 经济观察与ChatGPT聊了聊 &#xff1a;OpeoAI 的144个小时到底发生了什么前言感恩节&#xff1a;奥特曼在社交媒体上发文&#xff1a;和Quora CEO亚当德安杰洛&#xff08;Adam DAngelo&#xff09;度过了美好的几个小时对话ChatGPT 探寻技术发展…

三季度营收下滑16.3%,网易云音乐如何讲出新故事?

在选择重新回归音乐本身后&#xff0c;网易云音乐(09899.HK)业绩承压的困局写在最新的三季报里。 「不二研究」据网易云音乐三季报发现&#xff1a;今年三季度&#xff0c;网易云音乐净收入同比下滑16.3%。目前&#xff0c;网易云音乐主要面临营收下滑、商业化场景探索尚未形成…

【01】侯小啾python入门计划_导语

侯小啾python入门计划_导语 欢迎大家订阅《侯小啾python入门计划》专栏&#xff0c;本专栏经作者侯小啾精心打造&#xff0c;极致把握初学者心理状态与困境&#xff0c;让小白少走弯路&#xff0c;让大佬快速成长。对于大多数非科班人士而言&#xff0c;Python或是其接触的第一…

图像重定向Image Retarget

1、什么是图像重定向&#xff1f; 图像重定向旨在调整图像的尺寸和比例&#xff0c;以适应不同的显示设备或布局要求。 它可以通过添加或删除像素来改变图像的宽度和高度&#xff0c;同时保持图像的内容和结构的相对比例。 这种技术可以通过保持图像的关键特征和结构来最大程度…

【传智杯】儒略历、评委打分、萝卜数据库题解

&#x1f34e; 博客主页&#xff1a;&#x1f319;披星戴月的贾维斯 &#x1f34e; 欢迎关注&#xff1a;&#x1f44d;点赞&#x1f343;收藏&#x1f525;留言 &#x1f347;系列专栏&#xff1a;&#x1f319; 蓝桥杯 &#x1f319;请不要相信胜利就像山坡上的蒲公英一样唾手…

unity3d地图、地面跟着NPC跑

清除烘焙后&#xff0c;再 将地图、地面的设置为非静态。只设置NPC的寻路路面为静态&#xff0c;再烘焙

戴尔科技推出全新96核Precision 7875塔式工作站

工作站行业一直是快节奏且充满惊喜的。在过去25年中,戴尔Precision一直处于行业前沿,帮助创作者、工程师、建筑师、研究人员等将想法变为现实,并对整个世界产生影响。工作站所发挥的作用至关重要,被视为化不可能为可能的必要工具。如今,人工智能(AI)和生成式AI(GenAI)的浪潮正在…

Android : Fragment 传递数据 — 简单应用

示例图&#xff1a; 创建 Fragment new -> Fragment -> Fragment&#xff08;Blank&#xff09; MainActivity.java package com.example.fragmentdemo;import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.FragmentManager; import andro…

媒介盒子分享:实用软文写作技巧

信息洪流中品牌方如果想要抓住用户注意力就需要一定的技巧&#xff0c;而品牌方写软文时是不是经常面临无法与用户产生共鸣、软文没有转化率的困境。今天媒介盒子就来和大家分享&#xff1a;实用软文写作技巧。 一、 强化优势 人一定是会往自己喜欢的方向走&#xff0c;远离不…

杂记 | 使用Docker安装并配置MongoDB以支持事务(单副本,并解决了证书文件错误的问题)

文章目录 00 安装前的准备01 创建Docker Compose文件02 设置证书文件03 启动MongoDB04 初始化副本集和创建用户05 验证安装 00 安装前的准备 在开始之前&#xff0c;确保已经安装了Docker&#xff0c;本文基于Docker Compose进行示范&#xff0c;没有装Docker Compose也可将其…

深度学习之图像分类(十五)DINAT: Dilated Neighborhood Attention Transformer理论精简摘要(二)

Dilated Neighborhood Attention Transformer摘要 局部注意力机制&#xff1a;例如滑动窗口Neighborhood Attention&#xff08;NA&#xff09;或Swin Transformer的Shifted Window Self Attention。 优点&#xff1a;尽管在降低自注意力二次复杂性方面表现出色&#xff0c; …

Java精品项目源码基于SpringBoot的智慧园区管理系统(v67)

Java精品项目源码基于SpringBoot的智慧园区管理系统(v67) 大家好&#xff0c;小辰今天给大家介绍一个智慧园区管理系统&#xff0c;演示视频公众号&#xff08;小辰哥的Java&#xff09;对号查询观看即可 文章目录 Java精品项目源码基于SpringBoot的智慧园区管理系统(v67)难度…