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。现在,要将该数组从中间截断,得到三个非空子数组。要求,三个子数组内各元素之和都相等。请问,共有多少种不同的截断方法?输入…...
促进关键软件高层次人才培养:平凯星辰与华东师范大学签订联合博士培养合作协议
2022 年年初,平凯星辰入选首批工信部教育部支持联合培养国家关键软件高层次人才计划。该计划旨在探索关键软件产教融合育人模式,超常规加快培养一批急需高层次人才,以及探索关键软件联合技术攻关新模式。2022 年年底,在该计划下 平…...
Java程序员的日常——经验贴
关于文件的解压和压缩 如果你的系统不支持tar -z命令 前往讨论 如果是古老的Unix系统,可能并不认识tar -z命令,因此如果你想要压缩或者解压tar.gz的文件,就需要使用gzip或者gunzip以及tar命令了。 关于tar.gz可以这么理解,tar结…...
电商API社区,商品数据,关键词搜索等
1. 需要做的事情 l 商品详情页实现 1、商品查询服务事项 2、商品详情展示 3、添加缓存 2. 实现商品详情页功能 2.1. 功能分析 1、Taotao-portal接收页面请求,接收到商品id。 2、调用taotao-rest提供的商品详情的服务,把商品id作为参数传递给服务。接…...
LEADTOOLS 22.0.6 UPDATE-Crack
OCR SDK 库 许多 OCR 增强功能 LEAD 行业领先的人工智能 OCR SDK 在以下方面获得了显着的识别优化:斜体、大写和小写字母、文本行组装和单词构建、列检测、基线检测和文本行分割。 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、数据字典:实现对数据字典标签的增删改查操作 2、编码管理:实现对系统编码的增删改查操作 3、用户管理:管理和查看用户角色 4、菜单管理:实现对系统菜单的增删改查操…...
【电商开发手册】订单-下单
下单需求 所谓下单,本质上就是买卖双方通过确认一系列信息并且签订电子合同的过程 在电商平台的下单过程中,也需要确定买卖双方的一系列信息: 买方:用户确认收货地址、支付方式、配送方式等等 卖方:卖方需要进行供…...
数据结构 - 优先级队列(堆)
文章目录前言1.介绍优先级队列2. 认识堆3. 实现优先级队列3.1 了解优先级队列的构造方法:3.2 使用优先级队列解决问题:总结前言 本篇PriorityQueue优先级队列的介绍其底层是堆,关于堆的认识,使用优先级队列能解决的一些问题&…...
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、代码不断拆分复用的过程总结参考文献前言 写代码,在提高效率的同时,要方便人看,这个人包括自己。大函数要拆分成一些小函数,让每个函数的宏观目的和步骤都显得清晰&am…...
c# winform错误大全
c# winform 错误大全为了实现安装包安装完成后,启动程序。System.BadImageFormatException: 未能加载文件或程序集“file:///C:\xxxxxxxxx\xxxxxxx.exe”或它的某一个依赖项。生成此程序集的运行时比当前加载的运行时新,无法加载此程The version of the …...
AI_News周刊:第一期
2023.02.06—2023.02.12 关于ChatGPT的前言: 在去年年末,OpenAI的ChatGPT在技术圈已经火了一次,随着上周它的二次出圈,ChatGPT算得上是人工智能领域的一颗明星,它在聊天机器人领域有着不可忽视的影响力。其准确、快速…...
搭建mysql主从复制
前言: 👏 作者简介:我是笑霸final,一名热爱技术的在校学生。 📝 个人主页:个人主页1 || 笑霸final的主页2 📕 系列专栏:数据库 📧 如果文章知识点有错误的地方࿰…...
内存溢出、内存泄露的概述及常见情形
内存溢出(OutofMemoryError) 简述 java doc 中对 Out Of Memory Error 的解释是,没有空闲内存,并且垃圾收集器也无法提供更多内存。 JVM 提供的内存管理机制和自动垃圾回收极大的解放了用户对于内存的管理,由于 GC&…...
Linux 中断实验
目录 一、Linux 中断简介 上半部与下半部 二、添加设备树 三、编写驱动 1、定义宏 2、编写一个key结构体 3、imx6uirq设备添加成员 编辑4、按键中断处理函数 5、按键初始化 6、在驱动入口添加初始化 7、 驱动出口函数 代码如下 四、利用定时器进行消抖处理 1、添…...
【c++】指针
文章目录指针的定义和使用指针所占的内存空间空指针野指针const修饰指针指针和数组指针和函数指针、数组、函数案例:冒泡排序指针的定义和使用 指针定义的语法:数据类型 * 指针变量名 使用指针: 可以通过解引用的方式来找到指针指向的内存&…...
别具一格的婚礼,VR全景+婚礼的优势展现在哪里?
随着90后、95后逐渐步入结婚的主力军中,如何策划一场别具一格的婚礼是许多年轻人所头疼的,那么今年我们就可以玩点新潮的,VR婚礼或许是个不错的选择。 VR全景婚礼就是通过全景摄像机对婚礼进行记录,不但可以帮助新人捕捉婚礼的精彩…...
【GD32F427开发板试用】5. SPI驱动TFTLCD屏幕
本篇文章来自极术社区与兆易创新组织的GD32F427开发板评测活动,更多开发板试用活动请关注极术社区网站。作者:hehung 之前发帖 【GD32F427开发板试用】1. 串口实现scanf输入控制LED 【GD32F427开发板试用】2. RT-Thread标准版移植 【GD32F427开发板试用…...
OpenFast联合仿真模型中独立变桨与统一变桨控制的对比
openfast与simlink联合仿真模型,风电机组独立变桨控制与统一变桨控制。 独立变桨控制。 OpenFast联合仿真。OpenFast和Simulink的联合仿真在风电领域属于基操了,尤其做变桨控制研究的老铁应该都接触过。咱们今天重点拆解独立变桨(IPC…...
机场接送机哪个APP便宜?2026年实测告诉你答案
作品声明:个人观点、仅供参考。深夜落地浦东机场,拖着行李箱走向网约车候车区,抬头一看——溢价2.3倍,排队人数67人。这是今年3月初一位旅客的真实经历,在社交媒体上引发了不少共鸣。随着2026年民航出行持续升温&#…...
推挽电路与图腾柱结构技术解析与应用
图腾柱与互补推挽电路的技术解析1. 推挽电路基础概念1.1 推挽电路基本原理推挽电路(Push-Pull)是一种功率放大电路结构,其核心设计思想是通过两个互补工作的晶体管交替导通,实现对输入信号的功率放大。典型推挽电路具有以下两个关键特性:强大…...
OpenWrt 固件扩容官方指南
[OpenWrt Wiki] Expanding root partition and filesystem OpenWrt针对固件扩容有官方指南,但目前很多网络教程仍然停留在老版本,特此记录。 特点: 1、支持 ext4 和 squashfs 固件格式 2、自动识别根分区和文件系统。 3、利用空闲空间扩…...
直齿行星齿轮纯扭转非线性动力学建模与动力学方程推导研究:啮合相位对相图、频谱图、分岔图及庞加莱...
直齿行星齿轮纯扭转非线性动力学建模(含3个或4个行星轮),包括动力学方程推导过程,考虑了各啮合齿轮副之间的啮合相位,可出相图,频谱图,分岔图,庞加莱映射。行星齿轮系统的非线性动力学分析总带着点机械工程…...
为 GraphRAG 准备语料库
经典 RAG 专注于找到正确的段落,而 GraphRAG 帮助你看到段落、实体和主题在整个文档集合中是如何连接的。原始 GraphRAG 论文指出,标准 RAG 常常在处理宽泛问题时遇到困难,比如"这个数据集中的主要主题是什么?"为了解决…...
JavaWeb前后端交互实战:从Servlet到Axios的完整避坑指南
JavaWeb前后端交互实战:从Servlet到Axios的完整避坑指南 1. 现代Web开发中的前后端交互演进 在当今的Web应用开发中,前后端分离架构已成为主流趋势。这种架构模式下,前端负责用户界面展示和交互逻辑,后端专注于业务逻辑和数据处理…...
nlp_structbert_sentence-similarity_chinese-large 效果展示:中文文本相似度计算精准度测评
nlp_structbert_sentence-similarity_chinese-large 效果展示:中文文本相似度计算精准度测评 最近在做一个智能客服的项目,需要判断用户提问和知识库答案的匹配度。试了好几个开源模型,效果总是不太理想,要么把意思完全相反的句子…...
【事务】Spring Framework核心——事务管理:ACID特性、隔离级别、传播行为、@Transactional底层原理、失效场景
文章目录事务管理一、事务核心基石:ACID四大特性二、事务并发问题与隔离级别2.1 并发事务引发的3大核心读异常2.2 SQL标准4大隔离级别2.3 核心补充:MVCC与隔离级别的关联三、Spring事务传播行为3.1 第一类:支持当前事务(优先加入已…...
NaViL-9B图文对话教程:上传图片即问即答,新手零基础快速上手
NaViL-9B图文对话教程:上传图片即问即答,新手零基础快速上手 1. 认识NaViL-9B:你的智能图文助手 NaViL-9B是一款强大的多模态大语言模型,它能同时理解文字和图片内容。想象一下,你有一个既能聊天又能"看"图…...
