当前位置: 首页 > news >正文

element plus 使用细节

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

文章目录

  • table 表格自定义内容
  • select 显示的是value
  • upload 使用 —— 一个文件(多个文件可以借鉴)
  • el-dialog 使用
    • 一定要用一个参数接收 defineProps
    • 不要再 el-dialog 上加class
  • element plus 和 px2rem 不兼容
    • 错位的图标(element plus自己的bug)
    • 巨大的图标

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 的 html 部分:

<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" @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>

upload 逻辑:

// 获取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); //传文件} else {upload.value.clearFiles();// eslint-disable-next-lineElMessage({message: "请选择excel文件!",type: "error",});}
}
// 删除文件事件
function removeFun() {upload.value.clearFiles();
}
// 提交第二个文件事件
const handleExceed = (files) => {// console.log(files);upload.value.clearFiles();const file = files[0];upload.value.handleStart(file);
};
// 提交事件 -》 这部分按逻辑自行更改
const submitUpload = () => {uploadFile(fd).then((res) => {if (res.code == 200) {console.log(res);} else {// eslint-disable-next-lineElMessage({message: res.message,type: "error",});}}).catch((err) => {console.log(err);});
};

下载逻辑:

这个就是菜鸟插一嘴想写写,因为下载和请求接口的逻辑不太一样,只需要访问就行了,菜鸟有时候也容易忘记,所以这里记一下!

// 枚举类型
const downloadUrl = localStorage.getItem("downloadUrl"); // 这个菜鸟在不同环境设置的值不同
const downloadUrlArr = [`${downloadUrl}/user/downloadExcel`];// 下载表单
function downloadFile(filename, url) {let a = document.createElement("a");a.style = "display: none"; // 创建一个隐藏的a标签a.download = filename;a.href = url;document.body.appendChild(a);a.click(); // 触发a标签的click事件document.body.removeChild(a);
}

这里界面上调用的是数组,是因为可能不止一个地址,菜鸟把地址列举成为枚举属性了,可能不太好!!!

el-dialog 使用

菜鸟发现官网里面都是直接在一个文件里面使用,但是一般 el-dialog 都是在组件里面封装的,所以菜鸟就自己试了一下,结果问题就来了,这里记录一下!

vue2 使用 elementui dialog 的逻辑可以看看我的这篇博客:elementui 的 dialog 常用逻辑总结, 现在发现写得不太好,但是勉强可以看 (T——T)

vue3 的坑主要在于:vue3单向数据流,但是这个 el-dialog 又要v-model绑定,所以就会报错,但是好在发现官网还有一种绑定方式,那就是 modelvalue !!!

这里菜鸟就写个简单的例子:

父组件:

<script setup>
import Detail from "./components/detail.vue";// 详情弹窗
let editshow = ref(false);
let detailencodedCode = ref("");
// 打开
const showDetail = (data) => {detailencodedCode.value = data.encodedCode;editshow.value = true;
};
// 关闭
function hideEdit() {editshow.value = false;
}
</script><el-table-column label="操作" width="230"><template #default="scope"><el-button type="primary" size="small" @click="showDetail(scope.row)">详情</el-button></template>
</el-table-column><!-- 详情弹窗 -->
<Detail v-if="editshow" :pwd="detailencodedCode" :dialogVisible="editshow" @closeEvent="hideEdit"></Detail>

dialog 组件:

<script setup>
import { ref } from "vue";
import { getShareDetail } from "../../../network/api.js";// eslint-disable-next-line
const props = defineProps({dialogVisible: {type: Boolean,default: false,},pwd: {type: String,default: "",},
});// eslint-disable-next-line
const emit = defineEmits(["closeEvent"]);// 关闭弹窗
function handleClose() {emit("closeEvent", false);
}
const dialogBox = ref()
function closeDialog() {dialogBox.value.resetFields();
}
</script><template><div><el-dialog title="详情" ref="dialogBox" :modelValue="dialogVisible" :before-close="handleClose" @close="closeDialog"><p>暂无数据!</p><template #footer><div><el-button @click="handleClose">关闭</el-button></div></template></el-dialog></div>
</template>

注意 :
这里的组件封装有两个问题需要注意!

一定要用一个参数接收 defineProps

虽然在 template 里面可以直接使用 defineProps 里面的变量,比如:dialogVisible, 但是 js 里面是不能直接访问的,会提示没有定义,只能通过:props.pwd 访问,当然接收的变量名自己定义就行,不一定要是props !!!

不要再 el-dialog 上加class

如果你给 el-dialog 上加上了class,那个你将收获一个警告:

Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

element plus 和 px2rem 不兼容

如果你在 element plus 项目中引入了 px2rem,那么你可能喜提巨大的图标等!

错位的图标(element plus自己的bug)

解决办法就是在 public 底下的 index.html 中加入:

/* 解决 element plus 样式问题 */
.el-icon.el-message__closeBtn {position: absolute !important;
}

巨大的图标

解决办法就是在既有 px2rem 又有用到 ElMessage 的界面上加上如下代码:

.el-message-icon--error {font-size: 5px;
}
.el-message-icon--success {font-size: 5px;
}
.el-message-icon--info {font-size: 5px;
}

记住不要在 style 上加 scoped !!!

相关文章:

element plus 使用细节

菜鸟一直在纠结这个写不写&#xff0c;因为不难&#xff0c;但是菜鸟老是容易忘记&#xff0c;虽然想想或者搜搜就可以马上写出来&#xff0c;但是感觉每次那样就太麻烦了&#xff0c;不如一股做气写了算了&#xff0c;后面遇见别的就再来补充&#xff01; 文章目录 table 表格…...

分析:为什么有些pdf打开之后无法编辑?

pdf文件大家应该都经常接触&#xff0c;但是不知道大家会遇到这种情况&#xff1a;有些PDF文件打开之后无法编辑&#xff1f;是什么原因呢&#xff1f;今天我们来分析一下都是那些原因导致的。 首先我们可以考虑一下&#xff0c;PDF文件中的内容是否是图片&#xff0c;如果确认…...

Django请求生命周期流程

浏览器发起请求。 先经过网关接口&#xff0c;Django自带的是wsgiref&#xff0c;请求来的时候解析封装&#xff0c;响应走的时候打包处理&#xff0c;这个wsgiref模块本身能够支持的并发量很少&#xff0c;最多1000左右&#xff0c;上线之后会换成uwsgi&#xff0c;并且还会加…...

C++学习 --string

目录 1&#xff0c; 什么是string 2&#xff0c; 创建string 3&#xff0c; 操作string 3-1&#xff0c; 赋值 3-1-1&#xff0c; 赋值() 3-1-1&#xff0c; 赋值(assign) 3-2&#xff0c; 修改 3-2-1&#xff0c; 拼接 3-2-1-1&#xff0c; 拼接() 3-2-1-2&#xff…...

Spark SQL,DF,RDD cache常用方式

RDD中的cache 调用cache方法 val testRDD sc.parallelize(Seq(elementA, elementB, elementC)).map(x > (x._1, x._2)).setName("testRDD")testRDD.cache() dataframe中的cache 利用catalog以表的形式对数据进行缓存 import org.apache.spark.SparkConf impo…...

Python中如何用栈实现队列

目录 一、引言 二、使用两个栈实现队列 三、性能分析 四、应用场景 五、代码示例 六、优缺点总结 一、引言 队列&#xff08;Queue&#xff09;和栈&#xff08;Stack&#xff09;是计算机科学中常用的数据结构。队列是一种特殊的线性表&#xff0c;只允许在表的前端进行…...

python模块pyDes,DES对称加密算法库

一、简介 pyDes是一个Python模块&#xff0c;用于进行DES&#xff08;Data Encryption Standard&#xff09;加密和解密操作。DES是一种对称密钥加密算法&#xff0c;广泛用于数据保密和传输。 优点&#xff1a; 1.简单易用&#xff1a;pyDes模块提供了简单的接口&#xff0c;…...

Centos7安装配置nginx

快捷查看指令 ctrlf 进行搜索会直接定位到需要的知识点和命令讲解&#xff08;如有不正确的地方欢迎各位小伙伴在评论区提意见&#xff0c;小编会及时修改&#xff09; Centos7安装配置nginx Nginx介绍 Nginx (engine x) 是一个高性能的 HTTP 和 反向代理 服务&#xff0c;也…...

9.Spring 整合 Redis

引入依赖&#xff1a;spring-boot-starter-data-redis配置 Redis&#xff1a;配置数据库参数、编写配置类&#xff0c;构造 RedisTemplate访问 Redis&#xff1a; redisTemplate.opsForValue() redisTemplate.opsForHash() redisTemplate.opsForList() redisTemplate.opsForSe…...

【Java学习笔记】73 - 正则表达式

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter27/src/com/yinhai/regexp 一、引入正则表达式 1.提取文章中所有的英文单词 2.提取文章中所有的数字 3.提取文章中所有的英文单词和数字 4.提取百度热榜标题 正则表达式是处理文本的利器…...

【算法】滑动窗口题单——1.定长滑动窗口⭐

文章目录 1456. 定长子串中元音的最大数目2269. 找到一个数字的 K 美丽值1984. 学生分数的最小差值&#xff08;排序&#xff09;643. 子数组最大平均数 I1343. 大小为 K 且平均值大于等于阈值的子数组数目2090. 半径为 k 的子数组平均值2379. 得到 K 个黑块的最少涂色次数1052…...

可观测性项目开发与学习ing

http1,2,3的区别 HTTP/1.0、HTTP/1.1、HTTP/2 和 HTTP/3 是不同版本的协议&#xff0c;它们在以下方面有所不同&#xff1a; HTTP/1.0: 是最早的版本&#xff0c;主要特点如下&#xff1a; 每个请求和响应都需要建立一个新的 TCP 连接。不支持持久连接&#xff08;Keep-Alive&…...

apache-poi

excel类型 excel分为03版本和07版本 03版本 new HSSFWorkbook(); 优点&#xff1a;速度快 缺点&#xff1a;只能写入65536行数据 文件类型&#xff1a;.xls07版本 new XSSFWorkbook(); 优点&#xff1a;不限制写入数量 缺点&#xff1a;容易造成内存溢出(OOM)&#xff0c;速度…...

TOD和PPS精确时间同步技术

介绍 PPS和TOD PPS和TOD是两种用于精确时间同步的技术&#xff0c;它们在许多领域都有广泛的应用&#xff0c;总的来说&#xff0c;PPS和TOD被广泛应用于各种需要高度精确时间同步的领域&#xff0c;包括通信、测量、测试、系统集成和计算机网络等。 一、PPS PPS&#xff08…...

通过一个例子理解pytest的fixture的使用

需求 希望编写登陆web后做一些操作的测试用例&#xff0c;使用pytest框架具体测试用例执行前&#xff0c;需要先拿到web的token&#xff0c;这个获取token的动作只执行一次 例一 先上测试用例代码 adminpc-1:~$ cat my_test.py import pytestclass TestWebLogin:pytest.fi…...

单片机BootLoader是咋回事?

BootLoader的定义&#xff1a; CPU进入APP之前运行的一小段程序代码就叫做BootLoader。它是由程序员编写的&#xff0c;作用是更新应用程序。这也就说明了只有BootLoader的单片机才可以升级。有的产品有升级的需要就需要BootLoader了。 单片机的启动过程可以这么叙述&#xff…...

python与机器学习1,机器学习的一些基础知识(完善ing)

目录 1 关于阈值θ和偏移量b和公式变形的由来 2 激活函数 3 关于回归&#xff0c;分类等 4 关于模型 5 关于回归 6 关于分类 7 关于误差和梯度下降 7-2 最小二乘法修改θ 8 深度学习 10 分类 11 参考书籍 1 关于阈值θ和偏移量b和公式变形的由来 比如很多信息传入可…...

移动应用开发介绍及iOS方向学习路线(HUT移动组版)

移动应用开发介绍及iOS方向学习路线&#xff08;HUT移动组版&#xff09; 前言 ​ 作为一个HUT移动组待了一坤年&#xff08;两年半&#xff09;多的老人&#xff0c;在这里为还在考虑进哪个组的萌新们以及将来进组的新朋友提供一份关于移动应用开发介绍以及学习路线的白话文…...

vue+uniapp校园寻物失物招领平台 微信小程序1f6z5

系统中的核心用户是管理员&#xff0c;管理员登录后&#xff0c;通过管理员菜单来管理后台系统。主要功能有&#xff1a;首页、个人中心、用户管理、物品分类管理、物品信息管理、物品归还管理、留言板管理、系统管理等功能。管理员用例如图3-7所示。 对于本网上失物招领小程序…...

Linux内核--内存管理(三)物理内存分页机制--kmalloc及slub机制

一、引言 二、slub机制 ------>2.1、slub分配原理slub原理 ------>2.2、slub分配原理 ------>2.3、slub释放原理 ------>2.4、SLUB分配器 三、slub数据结构 ------>3.1、kmem_cache ------>3.2、kmem_cache_cpu ------>3.3、kmem_cache_node --…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

2025年低延迟业务DDoS防护全攻略:高可用架构与实战方案

一、延迟敏感行业面临的DDoS攻击新挑战 2025年&#xff0c;金融交易、实时竞技游戏、工业物联网等低延迟业务成为DDoS攻击的首要目标。攻击呈现三大特征&#xff1a; AI驱动的自适应攻击&#xff1a;攻击流量模拟真实用户行为&#xff0c;差异率低至0.5%&#xff0c;传统规则引…...