使用 element UI 实现自定义日历

news2024/9/21 14:36:47

效果如下:

HTML代码部分:

<el-calendar v-model="value">
            <!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
            <template slot="dateCell" slot-scope="{date, data}">
                <!-- 这里加了周六周天的判断(用于添加不同样式) -->
                <!-- <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{ data.day.split('-').slice(2).join('-') }}</div> -->
                <div>{{ data.day.split('-').slice(2).join('-') }}</div>
                <!-- 数组循环 -->
                <div class="cell" v-for="(item,index) in tableData" >
                    <!-- 加数据 -->
                    <div v-if="data.day == item.day">
                        <!-- 状态1 -->
                        <div style="margin: 5px 0;">
                            <el-tag v-if="item.isStatus1 === 0">待创建</el-tag>
                            <el-tag v-if="item.isStatus1 === 1">待提交</el-tag>
                            <el-tag v-if="item.isStatus1 === 2">待审核</el-tag>
                            <el-tag v-if="item.isStatus1 === 3">已审核</el-tag>
                            <el-tag v-if="item.isStatus1 === 4">退回</el-tag>
                            <el-tag v-if="item.isStatus1 === 5">重新审核</el-tag>
                            <el-tag v-if="item.isStatus1 === 6">月度审核</el-tag>
                        </div>
                        <!-- 状态2 -->
                        <div>
                            <el-tag v-if="item.isStatus2 === 0" type="success">正常</el-tag>
                            <el-tag v-if="item.isStatus2 === 1" type="danger">非正常</el-tag>
                            <el-tag v-if="item.isStatus2 === 2" type="warning">请假</el-tag>
                            <el-tag v-if="item.isStatus2 === 3" type="info">旷工</el-tag>
                        </div>
                    </div>
                </div>
            </template>
</el-calendar>

数据模拟部分:

<script>
export default {
    data() {
        return {
            value: new Date(),
            tableData: [
                { day:'2024-09-05', isStatus1: 0, isStatus2: 1},
                { day:'2024-09-10', isStatus1: 4, isStatus2: 3},
                { day:'2024-09-11', isStatus1: 2, isStatus2: 1},
                { day:'2024-09-12', isStatus1: 3, isStatus2: 2},
                { day:'2024-09-13', isStatus1: 1, isStatus2: 4},
                { day:'2024-09-14', isStatus1: 0, isStatus2: 0},
            ],
        }
    },
    created(){
        
    },
    methods: {
        
    }
}
</script>

至此完成!!!

测试有效!!!感谢支持!!!

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

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

相关文章

简单示例,搞懂PowerBI的ALL(),ALLEXCEPT()和ALLSELECTED()的区别

假设我们有如下数据&#xff0c;我们来统计下各班级的人数 我们在报表页里加上 班级’二班‘ 的筛选条件&#xff0c;此时PowerBI已经自动为我们显示了各班级人数&#xff1a;一班有3人&#xff0c;二班有1人。 根据我们的筛选条件&#xff0c;我们的统计人数应该是按照筛选器&…

解决RabbitMQ设置TTL过期后不进入死信队列

解决RabbitMQ设置TTL过期后不进入死信队列 问题发现问题解决方法一&#xff1a;只监听死信队列&#xff0c;在死信队列里面处理业务逻辑方法二&#xff1a;改为自动确认模式 问题发现 最近再学习RabbitMQ过程中&#xff0c;看到关于死信队列内容&#xff1a; 来自队列的消息可…

【YashanDB知识库】archivelog磁盘满导致数据库abnormal

本文转自YashanDB官网&#xff0c;具体内容可见archivelog磁盘满导致数据库abnormal 【问题分类】功能使用 【关键字】磁盘空间满&#xff0c;archivelog日志&#xff0c;archivelog自动清理 【问题描述】数据库状态变更为abnormal&#xff0c;检查V$DIAG_INCIDENT视图&#…

足底筋膜炎5天自愈方法

足底筋膜炎并没有确切的5天自愈方法。足底筋膜炎是足底筋膜的一种无菌性炎症&#xff0c;主要症状是脚后跟部位的疼痛&#xff0c;这种疼痛通常是由于长时间站立、行走或跑步等引起的足底筋膜过度牵拉所致。由于这是一种慢性炎症&#xff0c;其恢复过程往往需要一定的时间&…

docker查看从当前最后100条起看日志

logs.sh 使用说明 logs.sh 是一个用于查看 Docker 容器日志的脚本。该脚本支持两种使用方式&#xff1a; 默认查看 video-console 容器的日志。通过指定容器 ID 来查看相应容器的日志。 1. 默认方式 不需要任何参数&#xff0c;直接运行脚本&#xff0c;将自动查找名为 vid…

百度副总裁陈洋:大模型让软件开发更高效、更安全

&#x1f381;&#x1f449;点击进入文心快码 Baidu Comate 官网&#xff0c;体验智能编码之旅&#xff0c;还有超多福利&#xff01;&#x1f381; 9月11日-12日&#xff0c;CCS 2024成都网络安全系列活动在成都举行。百度副总裁陈洋出席大会开幕式并进行主题分享。陈洋表示&a…

postgres_fdw访问存储在外部 PostgreSQL 服务器中的数据

文章目录 一、postgres_fdw 介绍二、安装使用示例三、成本估算四、 远程执行选项执行计划无法递推解决 参考文件&#xff1a; 一、postgres_fdw 介绍 postgres_fdw 模块提供外部数据包装器 postgres_fdw&#xff0c;可用于访问存储在外部 PostgreSQL 服务器中的数据。 此模块…

C语言代码练习(第二十三天)

今日练习&#xff1a; 65、有 n 个整数&#xff0c;使前面各数顺序向后移动 m 个位置&#xff0c;最后 m 个数变成最前面 m 个数&#xff0c;写一函数实现以上功能&#xff0c;在主函数中输入 n 个整数和输出调整后的 n 个数。&#xff08;要求用指针&#xff09; 66、 n 个人围…

JavaScript 基础 - 第17天_AJAX综合案例

文章目录 Day02_AJAX综合案例目录学习目标01.案例_图书管理-介绍目标讲解小结 02.Bootstrap 弹框_属性控制目标讲解小结 03.Bootstrap 弹框_JS控制目标讲解小结 04.案例_图书管理\_渲染列表目标讲解小结 05.案例_图书管理\_新增图书目标讲解小结 06.案例_图书管理\_删除图书目标…

网络编程Udp协议

文章目录 UDP协议1、什么是UDP协议&#xff1f;一、定义与基本概念二、主要特点三、报文格式四、应用场景五、总结 2、如何使用Java中的UDP套接字&#xff1f;一、UDP常用APIDatagramSocketDatagramPacket 二、UDP协议下的客户端-服务器服务器客户端 UDP协议 UDP协议&#xff…

电脑怎么录制视频?游戏直播、教学分享必备!

在数字化时代&#xff0c;电脑录屏已成为游戏直播、教学分享、会议记录等多种场景下的必备技能&#xff0c;但有些朋友可能不知道怎么高效又清晰的录制视频&#xff0c;下面就给大家汇总了几个简单方法&#xff0c;一起来学习下吧~ 1. 嗨格式录屏大师 录屏大师软件免费下载_高…

方位大模型教程:从基础入门到实战应用

2024年大西洋彼岸的OpenAi公司&#xff0c;首次向世界吹响「大模型主导未来世界变革」的号角。 AI大模型&#xff0c;正在构建的颠覆力&#xff0c;为了更好的入局AI大模型&#xff0c;这次我特意复盘和整理大模型学习脉络&#xff0c;开了30节大模型的课程&#xff0c;包含大…

推荐一个java屏幕共享项目

java 屏幕共享项目 https://github.com/SpringStudent/JavaDesktopShare

【JAVA入门】Day44 - 字节打印流和字符打印流

【JAVA入门】Day44 - 字节打印流和字符打印流 文章目录 【JAVA入门】Day44 - 字节打印流和字符打印流一、字节打印流二、字符打印流三、输出语句和打印流的关系 打印流也是一种高级包装流&#xff0c;但是它只有输出&#xff0c;没有输入。 打印流一般是指&#xff1a;…

Qt_控件的QWidget属性介绍

目录 1、QWidget的核心属性 2、enabled 3、geometry 3.1 代码测试geometry 4、windowTitle 4.1 代码测试windowTitle 5、windowIcon 5.1 QIcon设置图标 5.2 qrc机制 5.3 代码测试windowIcon 6、windowOpacity 6.1 代码测试windowOpacity 7、cursor 7.1 代码测试…

使用xjar+exe4j+inno setup把加密后的jar打包成exe应用程序并创建服务

1、使用xjar对jar包进行加密 在项目的pom.xml中加入xjar的插件依赖&#xff0c;最好用2.x.x版本&#xff0c;高版本不支持-Dxjar.mode&#xff0c;无法免密码启动 github地址&#xff1a;xjar-maven-plugin <plugin><groupId>com.github.core-lib</groupId>…

RDD2022 道路瑕疵检测数据集

RDD2022 道路瑕疵数据集 txt标签或者xml标签 一共23767张图片 D00 D01 D20 D40四类 D00纵向裂缝 D10横向裂缝 D20网状裂缝 D40坑洞。 RDD2022 道路瑕疵检测数据集介绍 数据集概述 RDD2022&#xff08;Road Defect Detection 2022&#xff09;是一个专门用于道路瑕疵检测的数…

【MATLAB GUI 设计第一篇 】

文章目录 前言一、MATLAB GUI 是什么&#xff1f;二、guide 的使用1.进入GUI界面2. 布置绘图3.修改字体4. 回调函数&#xff0c;完成功能5. 整个函数和回调函数6.修改回调函数7. 显示效果8. 补充 三、 APP 的使用1.进入APP界面2.在 APP 菜单下 新建空白APP3.创建回调函数4.显示…

OpenCV class2-C#+winfrom显示控件使用窗口大小并内存管理

一.控件效果说明 二.代码声明&#xff08;已经循环读取10000次&#xff09; 全局 OpenCvSharp.Point point new OpenCvSharp.Point(0, 0); OpenCvSharp.Size size2; Mat src new Mat(); 初始化 size2 new OpenCvSharp.Size(pictureBox1.Size.Width, pictureBox1.Size.Hei…