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

【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.xdnf.cn/news/2019.html

相关文章:

  • BongoCat - 跨平台键盘猫动画工具
  • 线程同步与互斥
  • ElementUi的Dropdown下拉菜单的详细介绍及使用
  • 软件测试大模型Agent探索(dify:chatflow+企业微信机器人)
  • 【C++类和数据抽象】复制构造函数
  • SIEMENS PLC 程序 GRAPH 程序解读 车型入库
  • 【深度强化学习 DRL 快速实践】近端策略优化 (PPO)
  • mybatis-plus里的com.baomidou.mybatisplus.core.override.MybatisMapperProxy 类的详细解析
  • Python Cookbook-6.8 避免属性读写的冗余代码
  • (PYTHON)函数
  • 多物理场耦合低温等离子体装置求解器PASSKEy2
  • uniapp小程序开发入门01-快速搭建一个空白的项目并预览它
  • 多模态(3):实战 GPT-4o 视频理解
  • 线上图书借阅小程序源码介绍
  • 系统测试的技术要求
  • 基于Docker的Flask项目部署完整指南
  • 基于C#+Unity实现遇见李白小游戏
  • 《强势量价关系》速读笔记
  • 【信息系统项目管理师】高分论文:论人力资源管理与成本管理(医院信息系统)
  • 【Python数据分析】Pandas模块之pd.concat 函数
  • 【Agent】LangManus深度解析:AI自动化框架的对比与langgraph原理
  • openwrt查询网关的命令
  • Flink部署与应用——部署方式介绍
  • 更智能的银行体验:生成式 AI 与语义搜索的实际应用
  • windows服务器及网络:搭建FTP服务器
  • 【AIGC】基础篇:VS Code 配置 Python 命令行参数调试debug超详细教程
  • DeepSeek 赋能全流程数据治理:构建智能化数据价值链
  • vue3中的effectScope有什么作用,如何使用?如何自动清理
  • 传感器模块有助于加速嵌入式视觉开发
  • 最新大模型算法的研究进展与应用探索