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

【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法

type=dete,自定义cell-class-name打标记效果如下:
在这里插入图片描述

相关代码:
        <el-date-pickerv-model="date":clearable="false":editable="false":cell-class-name="cellClassName"type="date"format="YYYY-MM-DD"value-format="YYYY-MM-DD"></el-date-picker>//customDateArr : ['2025-04-01', '2025-04-23','2025-04-11']cellClassName:(date)=>{let that = thislet nDate = parseTime(date, '{y}-{m}-{d}')//日期格式化方法// console.log(nDate)if (that.customDateArr.includes(nDate)) {return 'custom_date_class'; // 应用自定义样式类}return ''; // 其他日期不应用样式},
<style lang="scss">
.custom_date_class {span::after{content: "";position: absolute;width: 6px;height: 6px;background: var(--el-color-danger);border-radius: 50%;bottom: -5px;left: 50%;transform: translateX(-50%);}
}
</style>
type=year相关内容:

在这里插入图片描述在这里插入图片描述

同样方法,当type=year时候,改成对应年份匹配后发现方法没有被调用,使用官方文档中的插槽方式(已升级到最新版)也无法实现。
最后通过焦点事件和面板更换事件直接操作dom元素进行强制赋值解决!!

<div class="select-center-left date-select"><el-date-pickerpopper-class="custom-year-picker"v-model="year":clearable="false":editable="false"type="year"value-format="YYYY"@focus="handleYearPickerOpen"@panel-change="handleYearPickerOpen":disabled-date="disabledDate"/>const handleYearPickerOpen = () => {nextTick(() => {const pickerPanel = document.querySelector(' .custom-year-picker');// console.log(pickerPanel)if (pickerPanel) {const cells = pickerPanel.querySelectorAll('td');cells.forEach(cell => {// 示例:为 2023 年的单元格添加样式if (cell.textContent.includes('2023')||cell.textContent.includes('2019')) {cell.classList.add('custom_date_class');}else {//不匹配需手动移除,否则切换面板后上次样式依旧存在cell.classList.remove('custom_date_class')}});}});
};

类型为月份相关解决:element-ui的日期选择器cellClassName无效问题

相关文章:

【vue】【element-plus】 el-date-picker使用cell-class-name进行标记,type=year不生效解决方法

typedete&#xff0c;自定义cell-class-name打标记效果如下&#xff1a; 相关代码&#xff1a; <el-date-pickerv-model"date":clearable"false":editable"false":cell-class-name"cellClassName"type"date"format&quo…...

c++11新特性随笔

1.统一初始化特性 c98中不支持花括号进行初始化&#xff0c;编译时会报错&#xff0c;在11当中初始化可以通过{}括号进行统一初始化。 c98编译报错 c11: #include <iostream> #include <set> #include <string> #include <vector>int main() {std:…...

Linux字符设备驱动开发的详细步骤

1. 确定主设备号​​ ​​手动指定​​&#xff1a;明确设备号时&#xff0c;使用register_chrdev_region()静态申请&#xff08;需确保未被占用&#xff09;。​​动态分配​​&#xff1a;通过alloc_chrdev_region()由内核自动分配主设备号&#xff08;更灵活&#xff0c;推…...

Nginx 二进制部署与 Docker 部署深度对比

一、核心概念解析 1. 二进制部署 通过包管理器(如 apt/yum)或源码编译安装 Nginx,直接运行在宿主机上。其特点包括: 直接性:与操作系统深度绑定,直接使用系统库和内核功能 。定制化:支持通过编译参数(如 --with-http_ssl_module)启用或禁用模块,满足特定性能需求 。…...

C++23 中 constexpr 的重要改动

文章目录 1. constexpr 函数中使用非字面量变量、标号和 goto (P2242R3)示例代码 2. 允许 constexpr 函数中的常量表达式中使用 static 和 thread_local 变量 (P2647R1)示例代码 3. constexpr 函数的返回类型和形参类型不必为字面类型 (P2448R2)示例代码 4. 不存在满足核心常量…...

CMake ctest

CMake学习–ctest全面介绍 1. 环境准备 确保已安装 cmake 和编译工具&#xff1a; sudo apt update sudo apt install cmake build-essential2. 创建示例项目 假设我们要测试一个简单的数学函数 add()&#xff0c;项目结构如下&#xff1a; math_project/ ├── CMakeList…...

全面解析React内存泄漏:原因、解决方案与最佳实践

在开发React应用时&#xff0c;内存泄漏是一个常见但容易被忽视的问题。如果处理不当&#xff0c;它会导致应用性能下降、卡顿甚至崩溃。由于React的组件化特性&#xff0c;许多开发者可能没有意识到某些操作&#xff08;如事件监听、异步请求、定时器等&#xff09;在组件卸载…...

JavaScript学习教程,从入门到精通,Ajax数据交换格式与跨域处理(26)

Ajax数据交换格式与跨域处理 一、Ajax数据交换格式 1. XML (eXtensible Markup Language) XML是一种标记语言&#xff0c;类似于HTML但更加灵活&#xff0c;允许用户自定义标签。 特点&#xff1a; 可扩展性强结构清晰数据与表现分离文件体积相对较大 示例代码&#xff1…...

【FreeRTOS】事件标志组

文章目录 1 简介1.1事件标志1.2事件组 2事件标志组API2.1创建动态创建静态创建 2.2 删除事件标志组2.3 等待事件标志位2.4 设置事件标志位在任务中在中断中 2.5 清除事件标志位在任务中在中断中 2.6 获取事件组中的事件标志位在任务中在中断中 2.7 函数xEventGroupSync 3 事件标…...

超级扩音器手机版:随时随地,大声说话

在日常生活中&#xff0c;我们常常会遇到手机音量太小的问题&#xff0c;尤其是在嘈杂的环境中&#xff0c;如KTV、派对或户外活动时&#xff0c;手机自带的音量往往难以满足需求。今天&#xff0c;我们要介绍的 超级扩音器手机版&#xff0c;就是这样一款由上海聚告德业文化发…...

【数据可视化-27】全球网络安全威胁数据可视化分析(2015-2024)

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...

【6G 开发】NV NGC

配置 生成密钥 API Keys 生成您自己的 API 密钥&#xff0c;以便通过 Docker 客户端或通过 NGC CLI 使用 Secrets Manager、NGC Catalog 和 Private Registry 的 NGC 服务 以下个人 API 密钥已成功生成&#xff0c;可供此组织使用。这是唯一一次显示您的密钥。 请妥善保管您的…...

计算机视觉各类任务评价指标详解

文章目录 计算机视觉各类任务评价指标详解一、图像分类&#xff08;Image Classification&#xff09;常用指标1. 准确率&#xff08;Accuracy&#xff09;2. Top-k Accuracy3. 精确率&#xff08;Precision&#xff09;、召回率&#xff08;Recall&#xff09;、F1 分数&#…...

SIEMENS PLC程序解读 -Serialize(序列化)SCATTER_BLK(数据分散)

1、程序数据 第12个字节 PI 2、程序数据 第16个字节 PI 3、程序数据 第76个字节 PO 4、程序代码 2、程序解读 图中代码为 PLC 梯形图&#xff0c;主要包含以下指令及功能&#xff1a; Serialize&#xff08;序列化&#xff09;&#xff1a; 将 SRC_VARIABLE&#xff…...

宁德时代25年时代长安动力电池社招入职测评SHL题库Verify测评语言理解数字推理真题

测试分为语言和数字两部分&#xff0c;测试时间各为17分钟&#xff0c;测试正式开始后不能中断或暂停...

python源码打包为可执行的exe文件

文章目录 简单的方式&#xff08;PyInstaller&#xff09;特点步骤安装 PyInstaller打包脚本得到.exe文件 简单的方式&#xff08;PyInstaller&#xff09; 特点 支持 Python 3.6打包为单文件&#xff08;–onefile&#xff09;或文件夹形式自动处理依赖项 步骤 安装 PyIns…...

数据加密技术:从对称加密到量子密码的原理与实战

数据加密技术&#xff1a;从对称加密到量子密码的原理与实战 在网络安全体系中&#xff0c;数据加密是保护信息机密性、完整性的核心技术。从古代的凯撒密码到现代的量子加密&#xff0c;加密技术始终是攻防博弈的关键战场。本文将深入解析对称加密、非对称加密、哈希函数的核…...

高性能的开源网络入侵检测和防御引擎:Suricata介绍

一、Debian下使用Suricata 相较于Windows&#xff0c;Linux环境对Suricata的支持更加完善&#xff0c;操作也更为便捷。 1. 安装 Suricata 在Debian系统上&#xff0c;你可以通过包管理器 apt 轻松安装 Suricata。 更新软件包列表: sudo apt update安装 Suricata: sudo apt …...

【硬核解析:基于Python与SAE J1939-71协议的重型汽车CAN报文解析工具开发实战】

引言&#xff1a;重型汽车CAN总线的数据价值与挑战 随着汽车电子化程度的提升&#xff0c;控制器局域网&#xff08;CAN总线&#xff09;已成为重型汽车的核心通信网络。不同控制单元&#xff08;ECU&#xff09;通过CAN总线实时交互海量报文数据&#xff0c;这些数据隐藏着车…...

React类组件与React Hooks写法对比

React 类组件 vs Hooks 写法对比 分类类组件&#xff08;Class Components&#xff09;函数组件 Hooks组件定义class Component extends React.Componentconst Component () > {}状态管理this.state this.setState()useState()生命周期componentDidMount, componentDidU…...

Uniapp 自定义 Tabbar 实现教程

Uniapp 自定义 Tabbar 实现教程 1. 简介2. 实现步骤2.1 创建自定义 Tabbar 组件2.2 配置 pages.json2.3 在 App.vue 中引入组件 3. 实现过程中的关键点3.1 路由映射3.2 样式设计3.3 图标处理 4. 常见问题及解决方案4.1 页面跳转问题4.2 样式适配问题4.3 性能优化 5. 扩展功能5.…...

记录一次使用面向对象的C语言封装步进电机驱动

简介 (2025/4/21) 本库对目前仅针对TB6600驱动下的42步进电机的基础功能进行了一定的封装, 也是我初次尝试以面向对象的思想去编写嵌入式代码, 和直流电机的驱动步骤相似在调用stepmotor_attach()函数和stepmotor_init()函数之后仅通过结构体数组stepm然后指定枚举变量中的id即…...

Spark-streaming核心编程

1.导入依赖‌&#xff1a; <dependency> <groupId>org.apache.spark</groupId> <artifactId>spark-streaming-kafka-0-10_2.12</artifactId> <version>3.0.0</version> </dependency> 2.编写代码‌&#xff1a; 创建Sp…...

Exposure Adjusted Incidence Rate (EAIR) 暴露调整发病率:精准量化疾病风险

1. 核心概念 1.1 传统发病率的局限性 1.1.1 公式与定义 传统发病率公式为新发病例数除以总人口数乘以观察时间。例如在某社区观察1年,有10例新发病例,总人口1000人,发病率即为10/10001=0.01。 此公式假设所有个体暴露时间和风险相同,但实际中个体差异大,如部分人暴露时间…...

vue3+TS+echarts 折线图

需要实现的效果如下 <script setup lang"ts" name"RepsSingleLineChart">import * as echarts from echartsimport { getInitecharts } from /utils/echartimport type { EChartsOption } from echarts// 定义 props 类型interface Props {id: strin…...

MYSQL中为什么不建议delete数据

在 MySQL 中不建议频繁使用 delete 删除数据的原因主要在于性能、数据安全等方面的问题&#xff0c;以下是具体介绍&#xff1a; 性能问题 磁盘空间与碎片&#xff1a;delete 操作只是将数据标记为 “已删除”&#xff0c;并不会立即释放磁盘空间&#xff0c;频繁执行会导致大量…...

Linux多线程技术

什么是线程 在一个程序里的多执行路线就是线程。线程是进程中的最小执行单元&#xff0c;可理解为 “进程内的一条执行流水线”。 进程和线程的区别 进程是资源分配的基本单位&#xff0c;线程是CPU调度的基本单位。 fork创建出一个新的进程&#xff0c;会创建出一个新的拷贝&…...

12个HPC教程汇总!从入门到实战,覆盖分子模拟/材料计算/生物信息分析等多个领域

在科学研究、工程仿真、人工智能和大数据分析等领域&#xff0c;高性能计算 (High Performance Computing, HPC) 正扮演着越来越重要的角色。它通过并行处理、大规模计算资源的整合&#xff0c;极大提升了计算效率&#xff0c;使原本耗时数日的任务能够在数小时内完成。 随着计…...

[OpenGL] Lambertian材质漫反射BRDF方程的解释与推导

一、简介 本文简单的介绍了 Physical Based Rendering, PBR 中的 Lambertian 材质漫反射BRDF公式 f r l a m b e r t i a n c d i f f π fr_{lambertian}\frac{c_{diff}}{\pi} frlambertian​πcdiff​​的推导。 二、漫反射项 根据 渲染方程&#xff1a; L o ( v ) ∫ …...

小火电视桌面TV版下载-小火桌面纯净版下载-官方历史版本安装包

别再费心地寻找小火桌面的官方历史版本安装包啦&#xff0c;试试乐看家桌面吧&#xff0c;它作为纯净版本的第三方桌面&#xff0c;具有诸多优点。 界面简洁纯净&#xff1a;乐看家桌面设计简洁流畅&#xff0c;页面简洁、纯净无广告&#xff0c;为用户打造了一个干净的电视操…...