element plus 使用细节

菜鸟一直在纠结这个写不写,因为不难,但是菜鸟老是容易忘记,虽然想想或者搜搜就可以马上写出来,但是感觉每次那样就太麻烦了,不如一股做气写了算了,后面遇见别的就再来补充!

文章目录

  • table 表格自定义内容
  • select 显示的是value
  • upload 使用

table 表格自定义内容

<el-table-column label="操作" width="230"><template #default="scope"><el-button type="primary" size="small">详情</el-button><el-popconfirm :title="$t('deleteprompt')" @confirm="deleteEvent(scope.row)"><template #reference><el-button type="danger" size="small">删除</el-button></template></el-popconfirm><el-button type="primary" size="small" :disabled="scope.row.status == 0">分享</el-button></template>
</el-table-column>

select 显示的是value

之所以显示为 value 就是因为,你 v-model 所给的值,和 el-option 的 value 不一致,最常见的就是 0 和 ’0‘ 了

upload 使用

<el-upload class="upload-demo" ref="upload" action="#" :auto-upload="false" :limit="1" :on-change="onFun" :on-exceed="handleExceed" :on-remove="removeFun"><template #trigger><el-button type="primary">选择文件</el-button></template><el-button class="uploadtext" type="success" :disabled="uploaddisable" @click="submitUpload"> 上传 </el-button><span class="tip" @click="downloadFile('模板', downloadUrlArr[formdata.formType])"> 下载模板 </span><template #tip><div class="el-upload__tip text-red">* 只能上传excel文件</div></template>
</el-upload>
// 上传是否可用
let uploaddisable = ref(true);
// 获取el-upload元素,方便后面清空
const upload = ref();
// 提交使用
let fd = null;
// 上传事件
function onFun(file) {if (file.name.indexOf(".xls") > 0 || file.name.indexOf(".xlsx") > 0 || file.name.indexOf(".xlsm") > 0) {fd = new FormData();fd.append("file", file.raw); //传文件uploaddisable.value = false;} else {upload.value.clearFiles();// eslint-disable-next-lineElMessage({message: "请选择excel文件!",type: "error",});}
}
// 删除文件事件
function removeFun() {upload.value.clearFiles();uploaddisable.value = true;
}
// 提交第二个文件事件
const handleExceed = (files) => {// console.log(files);upload.value.clearFiles();const file = files[0];upload.value.handleStart(file);
};
// 提交事件 -》 这部分按逻辑自行更改
let sampleGroups = ref([]);
let envFactors = ref([]);
let objkeyArr = ref([]);
const submitUpload = () => {uploadFile({formId: id,},fd).then((res) => {if (res.code == 200) {// 解析后结果保存,用于提交表单,不能直接使用 sampleGroups = ,会让数据不是响应式sampleGroups.value = res.data.sampleGroups; // 样品分组表envFactors.value = res.data.envFactors; // 环境因子表showresult.value = true;for (let i in envFactors.value[0]) {if (i != "sampleAnalysisName") {objkeyArr.value.push(i);}}} else {// eslint-disable-next-lineElMessage({message: res.message,type: "error",});}}).catch((err) => {console.log(err);});
};

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

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

相关文章

美创获IDC数据库安全市场代表厂商推荐,一路引领数据库安全

近日&#xff0c;全球领先的IT市场研究和咨询公司IDC发布《IDC Persepctive&#xff1a;中国数据库安全市场洞察&#xff0c;2023》报告。 凭借多年的技术积累和丰富的产品体系与行业实践&#xff0c;美创科技获「代表厂商」推荐&#xff0c;再次彰显专业领先能力&#xff01; …

Mybatis一级缓存和二级缓存原理剖析与源码详解

Mybatis一级缓存和二级缓存原理剖析与源码详解 在本篇文章中&#xff0c;将结合示例与源码&#xff0c;对MyBatis中的一级缓存和二级缓存进行说明。 MyBatis版本&#xff1a;3.5.2 文章目录 Mybatis一级缓存和二级缓存原理剖析与源码详解⼀级缓存场景一场景二⼀级缓存原理探究…

责任链模式 (Chain of Responsibility Pattern)

定义 责任链模式是一种行为型设计模式&#xff0c;用于在对象间建立一条处理请求的链。它允许多个对象有机会处理请求&#xff0c;从而减少请求的发送者和接收者之间的耦合。在责任链模式中&#xff0c;每个接收者包含对另一个接收者的引用&#xff0c;形成一条链。如果一个对…

tcp和 udp区别

相同点&#xff1a;都是传输层协议 不同点 是否面向连接 tcp:面向连接 三次握手&#xff0c;四次挥手端对端连接全双工通信&#xff08;允许双端同时收发数据&#xff09; udp:无连接 无三次握手&#xff0c;四次挥手支持一对一,一对多&#xff0c;多对多 数据传输方式 …

Linux平台下使用.NET Core访问Access数据库

运行环境 操作系统&#xff1a;Ubuntu 22.04.3 LTS (Jammy)开发工具&#xff1a;Visual Studio 2022 (17.8.0)运行时版本&#xff1a;.NET Runtime 8.0依赖库&#xff1a;unixodbc、mdbtools、odbc-mdbtools 依赖库安装 apt-get update sudo apt-get install unixodbc mdbto…

部署项目时常用的 Linux 命令

目录 1 前言2 SSH登录命令3 SCP传输命令4 CP拷贝命令5 MV移动命令6 TAR解压命令7 DU查看文件夹/文件大小8 TAIL查看日志9 NOHUP后台运行10 结语 1 前言 在应用部署过程中&#xff0c;Linux命令是必不可少的工具。它们能够帮助我们管理文件、连接服务器、拷贝文件、查看日志以及…

vite项目配置vite.config.ts在打包过程中去除日志

在生产环境上&#xff0c;务必要将日志清除干净&#xff0c;其因有二&#xff0c;在webgis系统中&#xff0c;有很多几何数据&#xff0c;体积大、数量多&#xff0c;很容易引起系统卡顿&#xff1b;清除log后&#xff0c;系统看着舒服&#xff0c;协同开发有很多无聊的日志&am…

生日礼物——华为机考真题

题目描述 小牛的孩子生日快要到了&#xff0c;他打算给孩子买蛋糕和小礼物&#xff0c;蛋糕和小礼物各买一个&#xff0c; 他的预算不超过x元。蛋糕 Cake 和小礼物 gift 都有多种价位的可供选择。 请返回小牛共有多少种购买方案。 输入描述 第一行表示 Cake的单价, 以逗号分隔 …

字符串:leetcode1410. HTML 实体解析器

1410. HTML 实体解析器 「HTML 实体解析器」 是一种特殊的解析器&#xff0c;它将 HTML 代码作为输入&#xff0c;并用字符本身替换掉所有这些特殊的字符实体。 HTML 里这些特殊字符和它们对应的字符实体包括&#xff1a; 双引号&#xff1a;字符实体为 &quot; &#xff…

一款非常优秀的项目管理工具:进度猫(推荐)

在项目管理中&#xff0c;一个好的工具可以极大地提高效率。 进度猫是一款非常优秀的项目管理工具。它具有非常强大的功能&#xff0c;可以帮助团队更好地管理项目进度。 通过可视化的方式&#xff0c;将项目进度、任务分配、需求变更等全面呈现给团队成员&#xff0c;让团队…

5.过滤敏感词 + 发布帖子 + 帖子详情

目录 1.过滤敏感词 1.1 定义前缀树 1.2 根据敏感词,初始化前缀树 1.3 编写过滤敏感词方法

需求分析BSA法

&#x1f449;BSA法&#xff08;Basic–Satisfier–Attractor&#xff09;是对客户需求进行优先级划分的需求分析方法。该模型体现了需求满足度和客户满意度之间的非线性关系。BSA法将客户需求分为3种类型&#xff0c;分别是基本型需求、满意型需求和兴奋型需求。下面将对每种需…

ABB机 器 人 操 作 培 训

目 录 1 培训手册介绍 ---------------------------------------------2 2 系统安全与环境保护 ---------------------------------------------3 3 机器人综述 ---------------------------------------------5 4 机器人示教 --------------------------------------------12…

哲学家就餐问题(java全代码)

题目 有N个哲学家围坐在一张圆桌旁&#xff0c;桌上只有N把叉子&#xff0c;每对哲学家中间各有一把。 哲学家的两种行为&#xff1a; 一、思考 二、吃意大利面 哲学家只能拿起手边左边或右边的叉子 吃饭需要两把叉子 正确地模仿哲学家的行为 方法一 一次只允许四个人…

FSCTF2023-Reverse方向题解WP。学习贴

文章目录 [FSCTF 2023]signin[FSCTF 2023]MINE SWEEPER[FSCTF 2023]Xor[FSCTF 2023]EZRC4[FSCTF 2023]ez_pycxor[FSCTF 2023]Tea_apk[FSCTF 2023]ezcode[FSCTF 2023]ezbroke[FSCTF 2023]rrrrust!!![FSCTF2023]ezrev&#xff08;未解决&#xff09; [FSCTF 2023]signin UPX壳&am…

redis-cluster集群模式

Redis-cluster集群 1 Redis3.0引入的分布式存储方案 2集群由多个node节点组成,redis数据分布在节点之中,在集群之中分为主节点和从节点3集群模式当中,主从一一对应,数据写入和读取与主从模式一样&#xff0c;主负责写&#xff0c;从只能读4集群模式自带哨兵模式&#xff0c;可…

自然资源土地管理法律法规知识竞赛这么办才高端

近些年&#xff0c;全国各地自然资源厅举办了土地管理法律法规知识竞赛&#xff0c;从我公司承办的这些赛事来看&#xff0c;传统的必答题、抢答题、风险题的方式已无法激起现场比赛气氛&#xff0c;需要更加复杂有趣的环节设置及高端竞赛软件及其配套设备加持才可以让知识竞赛…

Eigen::Matrix 转 std::vector 亲测ok!

std::vector<double> data;for (int kk 0; kk < 24; kk) {data.push_back(kk);}int n 24 / 3;typedef Eigen::Matrix<double, 3, Eigen::Dynamic> MatrixXd;//vector 转 matrixEigen::Map<Eigen::MatrixXd> result(data.data(), 3, n);//matrix 转 vect…

什么是交易量价差分析法?anzo Capital一分钟讲明白

交易量价差分析法是一种深入的市场分析方法&#xff0c;它主要探讨了价格、价差和交易量之间的相互关系。在此过程中&#xff0c;交易量主要揭示了市场上的交易活动情况&#xff0c;而价差则反映了这些交易的价格变动。 为了更准确地理解这种关系&#xff0c;定义了交易量价差…

21. Spring扩展点之推断构造方法

简介 spring自己本身有推断构造方法的逻辑&#xff0c;但同时也提供了扩展&#xff0c;SmartInstantiationAwareBeanPostProcessor#determineCandidateConstructors&#xff0c;实现该方法就可以自己定制获取哪个构造器的逻辑&#xff0c;该扩展点spring有一个默认的实现Autow…