用 ElementPlus 的日历组件 Calendar 自定义渲染

文章目录

    • 需求
    • 分析
      • 1. 英文改为中文
      • 2. 修改样式
      • 3. 自定义头部
      • 4. 增删改功能接入

需求

使用 ElementPlus中的 Calendar 组件完成自定义渲染

分析

1. 英文改为中文

转为中文的方式:用 ElementPlus的日历组件如何改为中文

2. 修改样式

在这里插入图片描述

  • 附源码
<template><el-calendar><template #date-cell="{ data }"><el-row :class="data.isSelected ? 'is-selected' : 'sds'">{{ data.day.split('-').slice(1).join('-') }}{{ data.isSelected ? '✔️' : '' }}</el-row><div v-for="(item, index) in textContent(data.day)" :key="index"><e-row><el-col class="center"><el-tag type="warning" class="tag"><el-row v-if="item.xianyue == 0"><el-col :span="17" class="tag"><span>当日限约</span></el-col><el-col :span="1"></el-col><el-col :span="6" class="tag2"><span>0</span></el-col></el-row><el-row v-else><el-col :span="17" class="tag"><span>当日限约</span></el-col><el-col :span="1"></el-col><el-col :span="6" class="tag2"><span>{{ item.xianyue }}</span></el-col></el-row></el-tag></el-col></e-row><el-rowstyle="margin-top: 10px"class="yuyue"v-if="item.yiyue && item.sy == 0"><el-col :span="11" class="center"><span>已约</span><span class="center2" style="">0</span></el-col><el-col :span="2" class="center">|</el-col><el-col :span="11" class="center"><span>剩余</span><span class="center2">0</span></el-col></el-row><el-row style="margin-top: 10px" class="yuyue" v-else><el-col :span="11" class="center"><span>已约</span><span class="center2" style="">{{item.yiyue}}</span></el-col><el-col :span="2" class="center">|</el-col><el-col :span="11" class="center"><span>剩余</span><span class="center2">{{ item.sy }}</span></el-col></el-row></div></template></el-calendar>
</template><style>
.is-selected {color: #1989fa;
}</style><style scoped >:deep .el-calendar__body {

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

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

相关文章

[工程经验] 模块设计规范

模块设计规范 文章目录 模块设计规范1.需求2.概念与逻辑图3.主要的数据结构图4.算法5.接口定义 1.需求 根据需求文档&#xff0c;摘录模块的对应部分&#xff0c;细化到可指导开发的程度&#xff0c;并根据实现的需要进行拓展&#xff0c;落地为一份设计文档。 2.概念与逻辑图…

linux查看硬盘空间使用情况

df &#xff08;1&#xff09;查看磁盘空间的占用情况 -h是给大小带上单位 df -h 总空间不一定等于已用未用&#xff0c;系统可能留出来一点空间另做他用 &#xff08;2&#xff09;查看INode的使用情况 df -idu du命令比df命令复杂一点&#xff0c;是查看文件和目录占用的…

【排序算法】七、快速排序补充:三指针+随机数法

「前言」文章内容是对快速排序算法的补充&#xff0c;之前的算法流程细节多难处理&#xff0c;这里补充三指针随机数法&#xff08;递归&#xff09;&#xff0c;这个容易理解&#xff0c;在时间复杂度上也更优秀 「归属专栏」排序算法 「主页链接」个人主页 「笔者」枫叶先生(…

Docker-compose部署Alertmanager+Dingtalk+Prometheus+Grafana实现钉钉报警

部署监控 version: 3.7services: #dingtalkdingtalk:image: timonwong/prometheus-webhook-dingtalk:latestcontainer_name: dingtalkrestart: alwayscommand:- --config.file/etc/prometheus-webhook-dingtalk/config.ymlvolumes:- /data/monitor/dingtalk/config.yml:/etc/p…

部署GlusterFS群集

目录 一、部署GlusterFS群集 1. 服务器节点分配 2. 服务器环境&#xff08;所有node节点上操作&#xff09; 2.1 关闭防火墙 2.2 磁盘分区&#xff0c;并挂载 2.3 修改主机名&#xff0c;配置/etc/hosts文件 3. 安装、启动GlusterFS&#xff08;所有node节点上操作&…

51单片机入门_江协科技_25~26_OB记录的笔记_蜂鸣器教程

25. 蜂鸣器 25.1. 蜂鸣器介绍 •蜂鸣器是一种将电信号转换为声音信号的器件&#xff0c;常用来产生设备的按键音、报警音等提示信号 •蜂鸣器按驱动方式可分为有源蜂鸣器和无源蜂鸣器&#xff08;开发板上用的无源蜂鸣器&#xff09; •有源蜂鸣器&#xff1a;内部自带振荡源&a…

二:什么是RocketMQ

RocketMQ是阿里开源的消息中间件产品&#xff0c;纯Java开发&#xff0c;具有高吞吐量、高可用性、适合大规模分布式系统应用的特点,性能强劲(零拷贝技术)&#xff0c;支持海量堆积,在阿里内部进行大规模使用&#xff0c;适合在互联网与高并发系统中应用。 官方文档&#xff1a…

【Linux】虚拟化技术docker搭建SuitoCRM系统及汉化

CRM系统 CRM&#xff08;Customer Relationship Management&#xff0c;客户关系管理&#xff09;系统是一种用于管理和优化企业与客户关系的软件工具。在商业竞争激烈的现代社会中&#xff0c;CRM系统已成为许多企业提高销售、增强客户满意度和实现持续增长的重要工具。本文将…

Hive-生产常用操作-表操作和数据处理技巧-202404

hive语句操作 我这个只涉及到hive的对表的操作&#xff0c;包括建表&#xff0c;建分区表&#xff0c;加载数据&#xff0c;导出数据&#xff0c;查询数据&#xff0c;删除数据&#xff0c;插入数据&#xff0c;以及对hive分区表的操作&#xff0c;包括查看分区&#xff0c;添加…

【宝德PI300T G2智能小站开发教程(二)】命令行linux如何挂载移动硬盘

目录 一.前言 二.步骤 1.查找移动硬盘: 2.建立挂载点 3.挂载 4.进入硬盘 5.解除挂载 一.前言 Linux中的挂载是将存储设备(如硬盘、分区、USB驱动器等)与文件系统关联起来,以便能够访问和使用其存储空间。 二.步骤 1.查找移动硬盘:

数据检索的优化之道:B树与B+树的深度解析与应用探索

1、引言 在信息时代&#xff0c;数据检索的速度和效率对于任何依赖数据处理的系统来说都至关重要。无论是在线搜索引擎、数据库管理系统还是文件存储系统&#xff0c;快速准确地检索所需数据都是核心需求。传统的线性数据结构在处理大规模数据集时往往力不从心&#xff0c;因此…

计算器(C语言)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 介绍关键代码运行代码&#xff08;3种&#xff09; 介绍 标准计数器&#xff1a;执行加减乘除等等科学计算器&#xff1a;执行分数、统计学、指数函数、对数、三角…

封装Element-Plus表单组件

业务组件 <template><m-form ref="form":options="options" label-width="100px"@on-preview="handlePreview"@on-remove="handleRemove"@before-remove="beforeRemove"@on-exceed="handleExceed&…

如何学习JVM的知识

文章目录 1. 明确学习JVM知识的目的2. 高屋建瓴地审视知识点 1. 明确学习JVM知识的目的 为什么需要学习jvm的知识&#xff1f; jvm的知识重点是内存分配和垃圾回收&#xff0c;这些都是能更深入理解java代码运行原理的关键&#xff0c;也是求职面试中绕不过去的一个坎。 并且它…

BoostCompass(数据准备预处理模块)

阅读导航 一、网页数据下载二、编写数据去标签与数据清洗的模块 Parser✅boost 开发库的安装1. 基本思路2. 详细讲解&#xff08;1&#xff09;程序递归遍历目录&#xff0c;收集所有HTML文件的路径&#xff08;2&#xff09;对每个HTML文件进行解析&#xff0c;提取出文档标题…

【资源分享】书籍:现代统计学:使用Python的计算方法

::: block-1 “时问桫椤”是一个致力于为本科生到研究生教育阶段提供帮助的不太正式的公众号。我们旨在在大家感到困惑、痛苦或面临困难时伸出援手。通过总结广大研究生的经验&#xff0c;帮助大家尽早适应研究生生活&#xff0c;尽快了解科研的本质。祝一切顺利&#xff01;—…

【微服务】------微服务架构技术栈

目前微服务早已火遍大江南北&#xff0c;对于开发来说&#xff0c;我们时刻关注着技术的迭代更新&#xff0c;而项目采用什么技术栈选型落地是开发、产品都需要关注的事情&#xff0c;该篇博客主要分享一些目前普遍公司都在用的技术栈&#xff0c;快来分享一下你当前所在用的技…

深入理解与实践:npm常用命令全面解析

引言 npm的重要性&#xff1a;简要介绍npm&#xff08;Node Package Manager&#xff09;作为Node.js生态系统的基石&#xff0c;其在JavaScript开发中的角色和作用。npm的功能概述&#xff1a;包管理和发布、依赖管理、版本控制、脚本执行等核心功能说明。 一、npm基础操作 …

Docker设置ustc的镜像源(镜像加速器:修改/etc/docker/daemon.json文件)

1、ustc简介 ustc是老牌的linux镜像服务提供者了&#xff0c;还在遥远的ubuntu 5.04版本的时候就在用。ustc的docker镜像加速器速度很快。ustc docker mirror的优势之一就是不需要注册&#xff0c;是真正的公共服务。 https://lug.ustc.edu.cn/wiki/mirrors/help/docker&#x…

ES6 => 箭头函数

目录 语法基本形式 参数 函数体 特点 箭头函数&#xff08;Arrow Function&#xff09;是ES6&#xff08;ECMAScript 2015&#xff09;中引入的一种新的函数语法&#xff0c;它提供了一种更简洁的方式来编写函数。箭头函数有几个显著的特点和优势&#xff0c;下面我们来详细…