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-uploadref="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.mzph.cn/news/178104.shtml

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

相关文章

自动化接口测试:Pytest让你轻松搞定!了解一般流程及方法

首先我们要明确&#xff0c;通常所接口测试其实就属于功能测试&#xff0c;主要校验接口是否实现预定的功能&#xff0c;虽然有些情况下可能还需要对接口进行性能测试、安全性测试。 在学习接口自动化测试之前&#xff0c;我们先来了解手工接口测试怎样进行。 URL组成 为了更…

灰度发布专题---2、Dubbo灰度发布

通过上面描述&#xff0c;我们理解了什么是灰度发布&#xff0c;接下来我们基于Dubbo实现灰度发布。Dubbo的灰度发布常见的方式有版本控制灰度发布、路由灰度发布、基于Apollo实现灰度发布&#xff0c;我们把这每种灰度发布都实现一次。 在学习Dubbo灰度发布之前&#xff0c;我…

5款最常用的Android测试框架(含代码示例)

前言 今天&#xff0c;我们就要说说5款最常用的Android测试框架&#xff0c;并且每个框架都给出了基本的代码示例。 在这我为大家准备了一份软件测试视频教程&#xff08;含面试、接口、自动化、性能测试等&#xff09;&#xff0c;就在下方&#xff0c;需要的可以直接去观看…

csdn博客编写技巧

随便记录一下csdn博客编写时候用的到技巧&#xff0c;以作备忘。 1. 表格 1.1 Markdown-Table-Generator 这个是csdn编辑器中&#xff0c;工具栏自带的表格用法。主要优点是比较直观&#xff0c;缺点是无法设置表格中行列的宽高。 用法&#xff1a; | 表头一 | 表头二 | |-…

分享错误代码0x8007007b的解决办法,有效解决错误代码0x8007007b

错误代码0x8007007b是Windows操作系统中常见的错误代码之一。出现这样的错误代码0x8007007b通常与许可证问题相关&#xff0c;并表示Windows无法激活或验证已安装的操作系统副本&#xff0c;导致应用程序不能正常运行。下面是关于错误代码0x8007007b的解决办法希望能帮助大家解…

Vue3-Pinia

Pinia是什么 Pinia是Vue的最新状态管理工具&#xff0c;是Vuex的替代品 比Vuex更大的优势在于&#xff1a; 1.提供更加简单的API&#xff08;去掉了mutation&#xff09; 2.提供符合&#xff0c;组合式风格的API&#xff08;和Vue3新语法统一&#xff09; 3.去掉了modules…

微信小程序nodejs+vue+uniapp视力保养眼镜店连锁预约系统

作为一个视力保养连锁预约的网络系统&#xff0c;数据流量是非常大的&#xff0c;所以系统的设计必须满足使用方便&#xff0c;操作灵活的要求。所以在设计视力保养连锁预约系统应达到以下目标&#xff1a; &#xff08;1&#xff09;界面要美观友好&#xff0c;检索要快捷简易…

GAN:ImprovedGAN-训练GAN的改进策略

论文&#xff1a;https://arxiv.org/abs/1606.03498 代码&#xff1a;https://github.com/openai/improved_gan 发表&#xff1a;NIPS 2016 一、文章创新 1&#xff1a;Feature matching&#xff1a;特征匹配通过为生成器指定新目标来解决GANs的不稳定性&#xff0c;从而防止…

亚马逊低价产品广告怎么打?亚马逊造成成本高的原因——站斧浏览器

亚马逊低价产品广告怎么打&#xff1f; 设置合适的出价&#xff1a;在低价自动广告中&#xff0c;设置适当的出价是关键。过高的出价可能导致广告成本过高&#xff0c;而过低的出价可能使广告曝光度不足。可以根据产品的竞争情况和预算来调整出价&#xff0c;找到一个平衡点。…

Mysql更新varchar存储的Josn数据

Mysql更新varchar存储的Josn数据 记录一次mysql操作varchar格式存储的json字符串数据 1、检查版本 -- 版本5.7以上才可以能执行json操作 select version(); 2、创建测试数据 -- 创建测试表及测试数据 CREATE TABLE test_json_table AS SELECT UUID(), {"test1": …

详解HTTP协议(介绍--版本--工作过程--Fiddler 抓包显示--请求响应讲解)

目录 一.HTTP协议的介绍 1.1HTTP是什么&#xff1f; 1.2HTTP版本的演变 二.HTTP的工作过程 三.使用Fiddler抓包工具 3.1简单讲解Fiddler 3.2Fiddler工作的原理 3.3抓包结果分析 四.HTTP请求 4.1认识URL 4.2关于URL encode 4.3认识方法 4.3.1认识get和post 4.3.…

Docker 安装kafka 并创建topic 进行消息通信

Apache Kafka是一个分布式流处理平台&#xff0c;用于构建高性能、可扩展的实时数据流应用程序。本文将介绍如何使用Docker容器化技术来安装和配置Apache Kafka。 一、使用镜像安装 1、kafka安装必须先安装Zookpper 2、下载镜像 docker pull wurstmeister/kafka 3、查看下载…

揭秘!9个月完成亚运会的整体数字化观测

项目背景与业务场景 2023 第 19 届亚运会在杭州举办&#xff0c;这将提高杭州的国际知名度&#xff0c;促进杭州经济、社会的全面发展&#xff0c;并将进一步推动奥林匹克运动在中国的发展&#xff0c;并且提升杭州城市形象和国际影响力。为亚运村村民提供便捷周到的服务和丰富…

不确定度校准和可靠性图简介

图片来源 项杰 一、说明 不确定性校准是机器学习中最容易被误解的概念之一。它可以概括为这个简单的问题&#xff1a;“鉴于上述下雨的可能性&#xff0c;您是否带伞&#xff1f;” 我们在日常生活中使用主观概率和不确定性校准的概念&#xff0c;但没有意识到它们。对于不确定…

第四节HarmonyOS 熟知开发工具DevEco Studio

一、设置主体样式 默认的代码主题样式是黑暗系的&#xff0c;如下图所示&#xff1a; 如果你不喜欢&#xff0c;可以按照一下步骤进行修改&#xff1a; 左上角点击Flie->Settings->Appearance&Behavior->Appearance&#xff0c;点击Theme&#xff0c;在弹出的下拉…

XXDD——UUII(交互设计)

今天我们再次回到Adobe全家桶的怀抱&#xff0c;今天介绍的这一位成员&#xff0c;是最直接帮助大家进行平面交互式设计的软件。他就是XD~ Adobe XD全称Adobe Experience Design CC&#xff0c; 官方版跨平台支持Win10 与 macOS&#xff0c;并且所有用户均可免费下载使用。Adob…

Linux fork笔试练习题

1.打印结果&#xff1f; #include <stdio.h> #include <unistd.h> #include <stdlib.h>int main() {int i0;for(;i<2;i){fork();printf("A\n");}exit(0); } 结果打印 A A A A A A 2.将上面的打印的\n去掉,结果如何? printf("…

Java小游戏 王者荣耀

GameFrame类 所需图片&#xff1a; package 王者荣耀;import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; import java.io.File; import java.util.ArrayLis…

Linux处理文本常见命令

目录 1 vim 2 echo 3 tee 4 cat 1 vim 编辑文本类的内容&#xff0c;使用的时候 vim [文件名]&#xff0c;比如 vim A.txt 进入vim界面后&#xff0c;按i可以开启编辑模式&#xff0c;按ESC可以关闭编辑模式&#xff0c;关闭编辑模式后:wq!保存并退出 2 echo ech…

【C语言加油站】函数栈帧的创建与销毁 #保姆级讲解

函数栈帧的创建与销毁 导言一、计算机硬件1.冯•诺依曼机基本思想2.冯•诺依曼机的特点&#xff1a;3.存储器3.1 分类3.2 内存的工作方式3.3 内存的组成 4.寄存器4.1 基本含义4.2 寄存器的功能4.3 工作原理4.4 分类4.4.1 通用寄存器组AX(AH、AL)&#xff1a;累加器BX(BH、BL)&a…