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

element-plus 使用笔记

npm install element-plus --save

自动导入

npm install -D unplugin-vue-components unplugin-auto-import
// vite.config.js
···
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
···
export default defineConfig({plugins: [···,AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],···
})

el-table

可对数据进行排序、筛选、对比或其他自定义操作

fit 默认 true
是否自动撑开列填充满表格容器
设为false 需要手动设置 列的 width

lazy 配合 load

修改行悬停高亮的样式 --el-table-row-hover-bg-color
表格边框颜色 --el-table-border-color

去除底部白线,border没有看before

树形数据配合多选,无法选到子集

el-table-column

type=“selection/index/expand”
分别对应多选框 / 序号 / 折叠符号

filters 与 filter-method 配置过滤
当表格数据更新时,筛选会失效

用min-width 设置比例 总数字自动分配
width 不太好用

show-overflow-tooltip 不换行,超出通过提示框显示

el-menu

el-menu-item 的 route 属性生效需要 设置 router=“ture”

el-tag

关闭图标 需要 deep 修改样式

el-tree

透明背景 避免悬停选中白底

// sass
.el-tree {background-color: transparent;color: #a4adce;:deep(.el-tree-node__content:hover),:deep(.el-tree-node:hover){background-color: transparent;}:deep(.el-tree-node:focus) {background-color: transparent;color: white;>.el-tree-node__content {background-color: transparent;color: white;}}
}

expand-on-click-node 点击结点是否展开,默认true展开

node-key 通常设为id default-key 会用到

setCheckedKeys([]) // 清空所有checked

修改页结点样式

:deep(.el-tree-node__children) {.el-tree-node.is-current {background-image: linear-gradient(to right, #1d305a, transparent, transparent);background-position-x: 35px;}
}
:deep(.is-current > .el-tree-node__content) {color: #CFD7FE
}

设置默认展开后,即便折叠也会展开其他后,再次被展开
默认选中并不会触发展开,setCurrentKey 可以触发展开

data 格式

[{id: '',label: '',children: ''}
]// node-key="id"
Props = {children: 'children',label: 'label',
}

el-pagination

只支持slot插槽 在layout中注册

background 为 false 时,是白色背景

v-loading 加载中

element-loading-background 设置加载中背景色

el-popconfirm

官方文档不够准确,没有展示 popper-class 属性

el-select-tree

props 不能漏,否则无法选择

<el-tree-select v-model="parent_id" :data="TreeData" :props="{label: 'label', value: 'value', childern: 'children'}" :render-after-expand="false" popper-class="position" check-strictly style="width: 70%;" node-key="tree_id" />

el-select

去除hover box-shadow

.el-select:hover {.el-input .el-input__wrapper {--el-input-hover-border-color: transparent;}
}

options 数据格式

[{label: '', value: ''}
]

vue scoped 特点

相关文章:

element-plus 使用笔记

npm install element-plus --save自动导入 npm install -D unplugin-vue-components unplugin-auto-import// vite.config.jsimport AutoImport from unplugin-auto-import/vite import Components from unplugin-vue-components/vite import { ElementPlusResolver } from …...

《蓝桥杯每日一题》 前缀和·Acwing 3956. 截断数组

1.题目https://www.acwing.com/problem/content/3959/给定一个长度为 n 的数组a1,a2,…,an。现在&#xff0c;要将该数组从中间截断&#xff0c;得到三个非空子数组。要求&#xff0c;三个子数组内各元素之和都相等。请问&#xff0c;共有多少种不同的截断方法&#xff1f;输入…...

促进关键软件高层次人才培养:平凯星辰与华东师范大学签订联合博士培养合作协议

2022 年年初&#xff0c;平凯星辰入选首批工信部教育部支持联合培养国家关键软件高层次人才计划。该计划旨在探索关键软件产教融合育人模式&#xff0c;超常规加快培养一批急需高层次人才&#xff0c;以及探索关键软件联合技术攻关新模式。2022 年年底&#xff0c;在该计划下 平…...

Java程序员的日常——经验贴

关于文件的解压和压缩 如果你的系统不支持tar -z命令 前往讨论 如果是古老的Unix系统&#xff0c;可能并不认识tar -z命令&#xff0c;因此如果你想要压缩或者解压tar.gz的文件&#xff0c;就需要使用gzip或者gunzip以及tar命令了。 关于tar.gz可以这么理解&#xff0c;tar结…...

电商API社区,商品数据,关键词搜索等

1. 需要做的事情 l 商品详情页实现 1、商品查询服务事项 2、商品详情展示 3、添加缓存 2. 实现商品详情页功能 2.1. 功能分析 1、Taotao-portal接收页面请求&#xff0c;接收到商品id。 2、调用taotao-rest提供的商品详情的服务&#xff0c;把商品id作为参数传递给服务。接…...

LEADTOOLS 22.0.6 UPDATE-Crack

OCR SDK 库 许多 OCR 增强功能 LEAD 行业领先的人工智能 OCR SDK 在以下方面获得了显着的识别优化&#xff1a;斜体、大写和小写字母、文本行组装和单词构建、列检测、基线检测和文本行分割。 LEADTOOLS为.NET 6、. NET Framework、Xamarin、UWP、C#、VB、C/C、Java、Objective…...

什么是OJ? 东方博宜题库部分题解

什么是OJ ? Online Judge 比如这样的:Home - 一本通OJ Q:这个在线裁判系统使用什么样的编译器和编译选项? A:系统运行于Debian/Ubuntu Linux. 使用GNU GCC/G++ 作为C/C++编译器, C: gcc Main.c -o Main -fno-asm -O2 -Wall -lm --static -std=c99 -DONLINE_JUDGE C++: g++ …...

企业工程项目管理系统源码的各模块及其功能点清单

工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#xff1a;实现对数据字典标签的增删改查操作 2、编码管理&#xff1a;实现对系统编码的增删改查操作 3、用户管理&#xff1a;管理和查看用户角色 4、菜单管理&#xff1a;实现对系统菜单的增删改查操…...

【电商开发手册】订单-下单

下单需求 所谓下单&#xff0c;本质上就是买卖双方通过确认一系列信息并且签订电子合同的过程 在电商平台的下单过程中&#xff0c;也需要确定买卖双方的一系列信息&#xff1a; 买方&#xff1a;用户确认收货地址、支付方式、配送方式等等 卖方&#xff1a;卖方需要进行供…...

数据结构 - 优先级队列(堆)

文章目录前言1.介绍优先级队列2. 认识堆3. 实现优先级队列3.1 了解优先级队列的构造方法&#xff1a;3.2 使用优先级队列解决问题&#xff1a;总结前言 本篇PriorityQueue优先级队列的介绍其底层是堆&#xff0c;关于堆的认识&#xff0c;使用优先级队列能解决的一些问题&…...

PDF内容提取器:ByteScout PDF Extractor SDK Crack

ByteScout PDF Extractor SDK – 用于 PDF 到 JSON、PDF 到 Excel、CSV、XML、从 .NET 和 ASP.NET 从 PDF 中提取文本的 PDF 提取器库 ByteScout PDF Extractor SDK – 用于 PDF 到 JSON、PDF 到 Excel、CSV、XML、从 .NET 和 ASP.NET 从 PDF 中提取文本的 PDF 提取器库​ ​ ​…...

字母板上的路径[提取公共代码,提高复用率]

提取公共代码前言一、字母版上的路径二、贪心1、idea2、go3、代码不断拆分复用的过程总结参考文献前言 写代码&#xff0c;在提高效率的同时&#xff0c;要方便人看&#xff0c;这个人包括自己。大函数要拆分成一些小函数&#xff0c;让每个函数的宏观目的和步骤都显得清晰&am…...

c# winform错误大全

c# winform 错误大全为了实现安装包安装完成后&#xff0c;启动程序。System.BadImageFormatException: 未能加载文件或程序集“file:///C:\xxxxxxxxx\xxxxxxx.exe”或它的某一个依赖项。生成此程序集的运行时比当前加载的运行时新&#xff0c;无法加载此程The version of the …...

AI_News周刊:第一期

2023.02.06—2023.02.12 关于ChatGPT的前言&#xff1a; 在去年年末&#xff0c;OpenAI的ChatGPT在技术圈已经火了一次&#xff0c;随着上周它的二次出圈&#xff0c;ChatGPT算得上是人工智能领域的一颗明星&#xff0c;它在聊天机器人领域有着不可忽视的影响力。其准确、快速…...

搭建mysql主从复制

前言&#xff1a; &#x1f44f; 作者简介&#xff1a;我是笑霸final&#xff0c;一名热爱技术的在校学生。 &#x1f4dd; 个人主页&#xff1a;个人主页1 || 笑霸final的主页2 &#x1f4d5; 系列专栏&#xff1a;数据库 &#x1f4e7; 如果文章知识点有错误的地方&#xff0…...

内存溢出、内存泄露的概述及常见情形

内存溢出&#xff08;OutofMemoryError&#xff09; 简述 java doc 中对 Out Of Memory Error 的解释是&#xff0c;没有空闲内存&#xff0c;并且垃圾收集器也无法提供更多内存。 JVM 提供的内存管理机制和自动垃圾回收极大的解放了用户对于内存的管理&#xff0c;由于 GC&…...

Linux 中断实验

目录 一、Linux 中断简介 上半部与下半部 二、添加设备树 三、编写驱动 1、定义宏 2、编写一个key结构体 3、imx6uirq设备添加成员 ​编辑4、按键中断处理函数 5、按键初始化 6、在驱动入口添加初始化 7、 驱动出口函数 代码如下 四、利用定时器进行消抖处理 1、添…...

【c++】指针

文章目录指针的定义和使用指针所占的内存空间空指针野指针const修饰指针指针和数组指针和函数指针、数组、函数案例&#xff1a;冒泡排序指针的定义和使用 指针定义的语法&#xff1a;数据类型 * 指针变量名 使用指针&#xff1a; 可以通过解引用的方式来找到指针指向的内存&…...

别具一格的婚礼,VR全景+婚礼的优势展现在哪里?

随着90后、95后逐渐步入结婚的主力军中&#xff0c;如何策划一场别具一格的婚礼是许多年轻人所头疼的&#xff0c;那么今年我们就可以玩点新潮的&#xff0c;VR婚礼或许是个不错的选择。 VR全景婚礼就是通过全景摄像机对婚礼进行记录&#xff0c;不但可以帮助新人捕捉婚礼的精彩…...

【GD32F427开发板试用】5. SPI驱动TFTLCD屏幕

本篇文章来自极术社区与兆易创新组织的GD32F427开发板评测活动&#xff0c;更多开发板试用活动请关注极术社区网站。作者&#xff1a;hehung 之前发帖 【GD32F427开发板试用】1. 串口实现scanf输入控制LED 【GD32F427开发板试用】2. RT-Thread标准版移植 【GD32F427开发板试用…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...