【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无效问题

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

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

相关文章

《Learning Langchain》阅读笔记8-RAG(4)在vector store中存储embbdings

什么是 vector store&#xff1f; 与专门用于存储结构化数据&#xff08;如 JSON 文档或符合关系型数据库模式的数据&#xff09;的传统数据库不同&#xff0c;vector stores处理的是非结构化数据&#xff0c;包括文本和图像。像传统数据库一样&#xff0c;vector stores也能执…

用api的方式调用本地下载好的大模型(以llama为例,不是ollama!!!)

目录 1、创建虚拟环境2、激活虚拟环境3、安装相关库4、编写脚本&#xff08;test.py&#xff09;调用脚本5、bash中测试通信完美结果 1、创建虚拟环境 conda create -n myenv python3.12 -y2、激活虚拟环境 conda activate myenv3、安装相关库 pip install vllm fastapi uvi…

算力网络(CFN)在跨校联合科研中的应用:安全性挑战与联邦调度实践

引言&#xff1a;科研协作的算力困境 上海交通大学与麻省理工学院联合开展的高能物理模拟实验&#xff0c;因算力资源分配不均导致部分节点连续72小时处于空转状态。这个典型案例揭示了当前跨机构科研协作的痛点&#xff1a;‌算力资源无法实现安全可信的细粒度共享‌。算力网…

高防IP+CDN组合:电商大促的“双保险”防护方案

引言 电商大促期间&#xff0c;平台流量呈爆发式增长&#xff0c;既要应对瞬时激增的访问量&#xff0c;又要防范黑客趁机发起的DDoS攻击、恶意爬虫等威胁。单一防护手段往往难以兼顾性能与安全&#xff0c;而高防IPCDN组合通过“流量清洗加速分发”的双重机制&#xff0c;为电…

# 构建词汇表:自然语言处理中的关键步骤

构建词汇表&#xff1a;自然语言处理中的关键步骤 在自然语言处理&#xff08;NLP&#xff09;任务中&#xff0c;词汇表&#xff08;Vocabulary&#xff09;是文本数据预处理的核心组件之一。它将文本中的单词或字符映射为数值索引&#xff0c;从而让计算机能够理解和处理语言…

SQL进阶知识:七、数据库设计

今天介绍下关于数据库设计的详细介绍&#xff0c;并结合MySQL数据库提供实际例子。 数据库设计是确保数据库能够高效、安全地存储和管理数据的关键环节。良好的数据库设计可以提高查询性能、减少数据冗余、确保数据完整性&#xff0c;并简化数据维护。以下是关于数据库设计的详…

python如何取消word中的缩进

在python-docx中&#xff0c;取消缩进可以通过将相应的缩进属性设置为None或0来实现。以下是取消不同类型缩进的方法&#xff1a; 取消左缩进 from docx import Documentdoc Document(existing_document.docx)for paragraph in doc.paragraphs:# 取消左缩进paragraph.paragr…

Docker拉取镜像代理配置实践与经验分享

Docker拉取镜像代理配置实践与经验分享 一、背景概述 在企业内网环境中&#xff0c;我们部署了多台用于测试与学习的服务器。近期&#xff0c;接到领导安排&#xff0c;需在其中一台服务器上通过Docker安装n8n应用程序。然而在实际操作过程中&#xff0c;遭遇Docker官方镜像库…

【数字图像处理】立体视觉基础(1)

成像 成像过程&#xff1a;三维空间坐标到二维图像坐标的变换 相机矩阵&#xff1a;建立三维到二维的投影关系 相机的使用步骤&#xff08;模型-视图变换&#xff09;&#xff1a; &#xff08;1&#xff09;视图变换 &#xff08;2&#xff09;模型变换 &#xff08;3&…

实验4:列表与字典应用

目的 &#xff1a;熟练操作组合数据类型。 试验任务&#xff1a; 1. 基础&#xff1a;生日悖论分析。如果一个房间有23人或以上&#xff0c;那么至少有两个人的生日相同的概率大于50%。编写程序&#xff0c;输出在不同随机样本数量下&#xff0c;23 个人中至少两个人生日相同的…

c++之网络编程

网络编程&#xff1a;使得计算机程序能够在网络中发送和接受数据&#xff0c;从而实现分布式系统和网络服务的功能。 作用&#xff1a;使应用程序能够通过网络协议与其他计算机程序进行数据交换 基本概念 套接字&#xff08;socket&#xff09;&#xff1a; 套接字是网络通信…

【Harmony_Bug】forEach + asyncawait 的异步陷阱

一、问题描述 今天在做一个RDB的小项目时&#xff0c;遇到一个问题&#xff0c;因为没报错其实也是不算是BUG&#xff0c;以下描述时我就直接说关键点&#xff0c;其他代码忽略。 我的数据模型初始化有六条数据如图 在持久化层&#xff0c;通过initUserData这个方法执行插入。…

大肠杆菌诱导蛋白时OD600=0.6-0.8添加IPTG的思考-实验操作系列-009

一、为什么用OD600表示菌液浓度&#xff1f; 1. 光密度与吸光值的关系 OD600是指在600纳米波长下的光密度&#xff08;Optical Density&#xff09;&#xff0c;也就是通过细菌悬浮液的光的吸收程度。根据比尔-朗伯定律&#xff0c;光密度与溶液中光学活性物质&#xff08;如…

OpenHarmony - 小型系统内核(LiteOS-A)(十),魔法键使用方法,用户态异常信息说明

OpenHarmony - 小型系统内核&#xff08;LiteOS-A&#xff09;&#xff08;十&#xff09; 十四、魔法键使用方法 使用场景 在系统运行出现无响应等情况时&#xff0c;可以通过魔法键功能确定系统是否被锁中断&#xff08;魔法键也无响应&#xff09;或者查看系统任务运行状态…

CUDA编程之Grid、Block、Thread线程模型

一、线程模型:Grid、Block、Thread概念 ‌1. 层级定义‌ ‌Thread(线程)‌ CUDA中最基本的执行单元,对应GPU的单个CUDA核心(SP)。每个线程独立执行核函数指令,拥有独立的寄存器和局部内存空间‌。 ‌Block(线程块)‌ 由多个线程组成(通常为32的倍数),是逻辑上的并…

实战交易策略 篇十九:君山居士熊市交易策略

文章目录 系列文章熊市三大特征熊市操作思维强势重势,弱势重质抢反弹重要前提和五大原则反弹逃顶操盘其他炒股的至高境界力戒“三进三出”八大心理误区八大戒律股市不败之法系列文章 实战交易策略 篇一:奥利弗瓦莱士短线交易策略 实战交易策略 篇二:杰西利弗莫尔股票大作手…

Flutter IOS 真机 Widget 错误。Widget 安装后系统中没有

错误信息&#xff1a; SendProcessControlEvent:toPid: encountered an error: Error Domaincom.apple.dt.deviceprocesscontrolservice Code8 "Failed to show Widget com.xxx.xxx.ServerStatus error: Error DomainFBSOpenApplicationServiceErrorDomain Code1 "T…

【计算机视觉】CV实战项目 - 深入解析基于HOG+SVM的行人检测系统:Pedestrian Detection

深入解析基于HOGSVM的行人检测系统&#xff1a;从理论到实践 技术核心&#xff1a;HOGSVM检测框架HOG特征原理SVM分类器 项目架构与数据准备INRIA Person数据集目录结构 实战指南&#xff1a;从零构建检测系统环境配置完整训练流程检测应用 关键技术问题与解决方案1. 难例挖掘不…

day01_编程语言介绍丶Java语言概述丶开发环境搭建丶常用DOS命令

编程语言介绍 ‌编程语言是一种用于人与计算机之间通信的语言&#xff0c;允许程序员编写代码&#xff0c;这些代码告诉计算机要执行哪些操作‌。编程语言可以被视为计算机可以理解并执行的指令集合&#xff0c;它是一种标准化的交流技巧&#xff0c;用于向计算机发出指令。‌…

告别默认配置!Xray自定义POC开发指南

文章涉及操作均为测试环境,未授权时切勿对真实业务系统进行测试! 下载与解压 官网地址: Xray GitHub Releases 根据系统选择对应版本: Windows:xray_windows_amd64.exe.zipLinux:xray_linux_amd64.zipmacOS:xray_darwin_amd64.zip解压后得到可执行文件(如 xray_linux_…