element ui el-calendar日历组件完整代码

el-calendar日历组件完整代码

    • 1. 说在前面
    • 2. 日历整体代码
    • 3. 编辑与新增

1. 说在前面

  • 最近一直忙于上班,没咋看博客,发现很多小伙伴都要日历组件的代码,于是今天抽空给大家整理一下,为爱发电!
  • 日历组件的原文在这里,建议先看这个哈:日历组件使用总结
  • 需求说明和注意事项都在上文了,这篇文章纯代码。
  • 由于此页面很复杂,为了让大家减轻看代码的负担,去掉了很多没用的逻辑。
  • data()里面的数据和css就没一个个搞了,大家看着来。
  • 一年多前写的,还是Vue2的语法。

2. 日历整体代码

    <el-dialogtitle="新增日计划":visible.sync="dialogVisible"width="80%":close-on-click-modal="false":close-on-press-escape="false":before-close="handleClose"><div><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label><el-form-item label="月份:"><el-date-pickerv-model="formInline.month"type="month"placement="bottom-start"value-format="yyyy-MM"format="yyyy-MM"placeholder="选择月"clearable@change="monthChange"></el-date-picker></el-form-item></el-form-item><el-form-item label><el-selectv-model="formInline.projectId"clearableplaceholder="选择项目"@change="projectChangeFn"><el-optionv-for="(item, index) in projectArr":key="index":label="item.proRemake":value="item.id"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="editDetail()">查询</el-button></el-form-item></el-form><el-calendar v-model="value"><!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法--><template slot="dateCell" slot-scope="{ date, data }"><div class="main-cd" @click="addPlan(data)"><div class="calendar-day">{{ data.day.split("-").slice(2).join("-") }}</div><divv-for="(item, index) in calendarData":key="index"class="is-selected"@click.stop="addPlan(item)"><span v-if="item.day == data.day && item.timeDetailsList"><el-tooltip placement="top"><div slot="content"><divv-for="items in item.timeDetailsList":key="items.day">{{ items.channelName }} :{{ items.wechatNumber }}个微信号, 计划投放{{items.planNumber}}, 实际加人{{ items.realityNumber }}</div></div><div v-for="items in item.timeDetailsList" :key="items.day">{{ items.channelName }} :{{ items.wechatNumber }}个微信号, 计划投放{{items.planNumber}}, 实际加人{{ items.realityNumber }}</div></el-tooltip></span></div></div></template></el-calendar></div><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog>
  • 实现的效果是这样的:
    在这里插入图片描述
  • 对应的控制方法在这里:
// 关闭弹窗handleClose() {this.dialogVisible = false;},
// 月份改变,下面的数据刷新monthChange(val) {// 这里的数据就是当前月份this.value = val;// 去请求不同月份的数据 刷新日历组件this.editDetail();},// 接口请求editDetail(){// 请求接口,目的就是刷新日历数据 => calendarData this.calendarData = res.data;},

3. 编辑与新增

  • 接下来是新增与编辑的逻辑,其实就是打开两个不同的弹窗:
  • 当然,逻辑做了删减,因为大家肯定是不需要的。
	<!-- 新增 --><el-dialog:title="diaTitle"width="70%":visible.sync="dialogFormVisible":close-on-click-modal="false":close-on-press-escape="false"><div class="parent-con"><div class="left"><div class="tips">设置微信号</div></div></div><div slot="footer" class="dialog-footer form-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="confirmFn">保 存</el-button><el-button type="primary" @click="confirmFn('next')" v-if="isAdd">保存并创建下个计划</el-button></div></el-dialog><!-- 编辑弹窗 --><el-dialogtitle="编辑日计划":visible.sync="dialogVisibleEdit"width="60%":close-on-click-modal="false":close-on-press-escape="false":before-close="handleCloseEdit"><div class="edit-time">时间:{{ editTime }}</div><span slot="footer" class="dialog-footer"><el-button @click="dialogVisibleEdit = false">取 消</el-button><el-button type="primary" @click="confirmEditFn">确 定</el-button></span></el-dialog>

在这里插入图片描述

  • 打开编辑与新增,是共用一个方法
addPlan(item) {// 此方法是用来清空数据的,防止数据重复this.clearDataForm();// 编辑才有这个参数if (item && item.projectId) {this.diaTitle = "编辑日计划";this.dialogVisibleEdit= true; // 打开编辑// 调用接口 做数据回显}else {// 此处做新增逻辑this.diaTitle = "新增日计划";this.dialogFormVisible = true;  // 打开新增}
}
  • 其他逻辑实现:
 // 监听日历的当前值watch: {value(val, oldVal) {this.nowTime = this.newDate(val);let tempIndex = this.getIndex();// 匹配某一项数据if (tempIndex > -1) {this.inputVal = this.calendarData[tempIndex].things;} else {this.inputVal = "";}},},// 做对应的处理,这是在 methods里面的 时间转换newDate(time) {let date = new Date(time);let y = date.getFullYear();let m = date.getMonth() + 1;m = m < 10 ? "0" + m : m;let d = date.getDate();d = d < 10 ? "0" + d : d;return y + "-" + m + "-" + d;},//  用于匹配与当前日期相符的数据 getIndex() {let tempIndex = this.calendarData.findIndex((item) => item.date == this.nowTime);return tempIndex;},// 初始化时间 => 在 mounted 里调用的initData() {this.nowTime = this.newDate(this.value);},
  • css部分,没做删减了,大家要的肯定在里面,需要找一下:
<style lang="scss" scoped>
.add-bidding {.calendar-day {color: #202535;font-size: 14px;}.is-selected {color: #f8a535;font-size: 12px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}#calendar.el-button-group> .el-button:not(:first-child):not(:last-child):after {content: "当月";}.inputVal {width: 300px;}.main-cd {width: 100%;height: 100%;padding: 10px;overflow: hidden;}::v-deep .el-calendar-day {padding: 0;}::v-deep .el-calendar-table:not(.is-range) td.next {display: none;}::v-deep .el-calendar-table:not(.is-range) td.prev {visibility: hidden;}::v-deep .el-calendar__button-group {display: none;}.now-time {font-size: 18px;height: 40px;line-height: 40px;span {color: #409eff;}}.form-footer {text-align: center;}.edit-time {margin-bottom: 20px;font-size: 16px;}.check-staff-box {margin-top: 10px;display: flex;flex-wrap: wrap;.csb-child {margin-right: 20px;}}.parent-con {width: 100%;.tips {width: 100%;border-left: 4px solid #525357;text-indent: 10px;margin-bottom: 20px;font-size: 16px;font-weight: bold;}}.remarke {color: #999999;}.rule-num {margin-top: 10px;}
}
</style>

1. 希望本文能对大家有所帮助,如有错误,敬请指出

2. 原创不易,还请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏)
3. 拜谢各位!后续将继续奉献优质好文
4. 如果存在疑问,可以私信我(主页有Q)

在这里插入图片描述

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

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

相关文章

mysql中的IN和NOT IN

在MySQL中&#xff0c;IN 和 NOT IN 是用于进行集合比较的条件运算符。它们可以用于简化多个 OR 或 AND 条件的查询。这些运算符在查询语句中非常常见&#xff0c;用于检查某个值是否在指定的集合中。 IN 运算符用于检查某个值是否在指定的集合中。NOT IN 运算符用于检查某个值…

USB转串口针线 USB四根线

USB转RS485 RXD 和 RXD- 分别代表数据接收的正端和负端。在一对通讯系统中&#xff0c;RXD信号在DTE设备端&#xff08;如计算机、工程主机&#xff09;为输入信号&#xff0c;即数据接收端。其中&#xff0c;RXD代表数据接收的正端&#xff0c;而RXD-代表数据接收的负端。 T…

如何构建最小堆?

方式1&#xff1a;上浮调整 /*** 上浮调整(小的上浮)*/ public static void smallUp1(int[] arr, int child) {int parent (child - 1) / 2;while (0 < child && arr[child] < arr[parent]) { // 0 < child说明这个节点还是叶子arr[child] arr[child] ^ ar…

吊车近电报警器:各种高空作业车辆防触电事故设备

吊车近电报警器&#xff1a;各种高空作业车辆防触电事故设备 吊车近电报警器是专门用于防止大型高空作业车&#xff08;如吊车、起重机、消防车等&#xff09;在作业过程中触碰高压线路而引发事故的装置。该装置能够实时监测吊车与高压电线之间的距离&#xff0c;并在危险情况…

静态链表具体题目处理详解

题目 给出两条链表的首地址以及若干结点的地址、数据、下一个结点的地址&#xff0c;求两条链表的首个共用结点的地址。如果两条链表没有共用结点&#xff0c;则输出-1. 思路 &#xff08;1&#xff09;由于地址的范围很小&#xff0c;因此可以直接用静态链表&#xff0c;但…

计算机视觉与模式识别实验1-1 图像的直方图平衡

文章目录 &#x1f9e1;&#x1f9e1;实验流程&#x1f9e1;&#x1f9e1;1.读入图像‘rice.png’&#xff0c;在一个窗口中显示灰度级n64&#xff0c;128和256的图像直方图。2.调解图像灰度范围&#xff0c;观察变换后的图像及其直方图的变化。3.分别对图像‘pout.tif’和‘ti…

③单细胞学习-pbmc的Seurat 流程

目录 1&#xff0c;数据读取 2&#xff0c;线粒体基因查看 3&#xff0c;数据标准化 4&#xff0c;识别高变基因 5&#xff0c;进行数据归一化 6&#xff0c;进行线性降维 7&#xff0c;确定细胞簇 8&#xff0c;UMAP/tSNE降维&#xff08;保存pbmc_tutorial.rds&#…

mirth Connect 自定义JAVA_HOME

mirth Connect 自定义JAVA_HOME 1、背景 服务器上安装了两个不同版本的Java&#xff0c;我希望Mirth服务使用与默认系统不同的版本。自定义指定java版本 2、解决方法 2.1 优先级说明 系统变量JAVA_HOME (设置后&#xff0c;mirth会根据这个进行启动运行服务&#xff0c;优先级…

【火炬打宝策略】

打宝策略刷遗物&#xff1a; 时可4 只刷奇诊加稀有度&#xff0c;没有奇诊可以直接不打。

模型 STORY评估框架

说明&#xff1a;系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。故事五要素&#xff1a;结构、时间、观点、现实、收益 。 1 STORY评估框架的应用 1.1 STORY模型展示其个性化在线学习解决方案的优势 一家在线教育平台想要通过一个故事来展示其个性…

不是我愿意孤独,而是周围找不到同类

概述 首先&#xff0c;听到这句话的时候&#xff0c;是从《天道》的电视剧中听到的。 仔细翻阅后&#xff0c;发现&#xff0c;这句话出自尼采。 完整的表述是&#xff1a;独处的人不是因为他想孤独&#xff0c;而是因为在他的周围找不到他的同类~ 先不说是不是真有此句&…

gcc 内建函数示例 __builtin_return_address

1,理论未动&#xff0c;示例先行 hello_gcc_callstack.c #include <stdio.h>void do_backtrace() {void *pc0 __builtin_return_address(0);void *pc1 __builtin_return_address(1);void *pc2 __builtin_return_address(2);void *pc3 __builtin_return_address(3);…

【工具】Docker安装Jenkins并部署Java项目

【工具】Docker安装Jenkins并部署Java项目 文章目录 【工具】Docker安装Jenkins并部署Java项目1. 前置条件2. 安装3. 创建项目3.1 配置Maven3.2 构建项目3.3 自动部署 1. 前置条件 准备一台云服务器或本地虚拟机&#xff0c;保证必须要java环境&#xff0c;一键安装jdk&#x…

Spring 框架:Java 企业级开发的基石

文章目录 序言Spring 框架的核心概念Spring 框架的主要模块Spring Boot&#xff1a;简化 Spring 开发Spring Cloud&#xff1a;构建微服务架构实际案例分析结论 序言 Spring 框架自 2002 年发布以来&#xff0c;已经成为 Java 企业级开发的标准之一。它通过提供全面的基础设施…

相机等效焦距

1. 背景 物理焦距我们很熟悉,但是在接触实际的相机参数时,相机厂家会提到一个参数等效焦距,甚至有时候不提供物理焦距,这时候如果我们得到真实的物理焦距需要进行一定的转换.在介绍两者之间的转换关系前,先介绍一下等效焦距的由来. 如上图,假设在某一个镜头,其成像面会出现图…

C++ vector的使用和简单模拟实现(超级详细!!!)

目录 前言 1.STL是什么 2.vector使用 2.1 vector简介 2.2 常用接口函数 1. 构造函数 2.operator[ ]和size&#xff0c;push_back 3. 用迭代器进行访问和修改 4. 范围for遍历 5.修改类型函数 pop_back find insert erase 6. 容量相关函数capacity resize reserve 3.…

05.爬虫---urllib与requests请求实战(GET)

05.urllib与Requests请求实战GET 1.Urllib模块2.Requests模块3.对比4.实战 GET请求 Python中的GET请求也是HTTP协议中的一种请求方法&#xff0c;用于向服务器请求数据。与POST请求不同&#xff0c;GET请求将数据以查询字符串的形式附加在URL后面&#xff0c;而不是封装在请求体…

Windows10专业版系统安装Hyper-V虚拟机软件

Windows10专业版系统安装Hyper-V虚拟机软件 适用于在Windows10专业版系统安装Hyper-v虚拟机软件。 1. 安装准备 1.1 安装平台 Windows 10 1.2. 软件信息 软件名称软件版本安装路径windowswindows 10 专业版Hyper-vHyper-v 2. Hyper-v搭建 2.1打开cmd软件 2.2打开控制面…

20 厂商文档学习资料查询

01 厂商介绍 新华三&#xff08;H3C&#xff09; 新华三是一家专注于IT基础设施产品和解决方案的公司&#xff0c;提供从网络设备到数据中心解决方案的全套服务。它是中国领先的网络解决方案供应商之一&#xff0c;业务涵盖企业网、数据中心、云计算等多个领域。 华为&#x…

Golang dlv远程debug

1. 前期准备 1.1. dlv安装 1.1.1. go install安装 go install github.com/go-delve/delve/cmd/dlvlatest1.1.2. 手动安装 下载 linuxx86 架构 二进制文件 &#x1f4ce;dlv.linux.x86.zip zip文件&#xff0c;下载后&#xff08; 如果没权限&#xff0c;记得 执行chmod ax…