vue学习之关于element日历calendar组件中上月，今天，下月的显示

追梦d

于 2021-10-08 00:00:00 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html vue 文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/jgp1234/article/details/120615610

本文介绍了在Vue项目中使用Element UI的日历组件Calendar时，如何展示上个月、当前月和下个月的日历。通过示例代码展示了基本的实现方式，并提到了官方文档资料有限，后续会进行更深入的学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天学习写日历的模板，不过element日历组件官方文档提供的资料较少，所以试着写了个简单的，以后再深入学习。

显示效果图：

本月：
在这里插入图片描述
上月：
下月：
下方是源码

<template>
<div>
<el-calendar v-model="value" id="calendar">
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
<template
slot="dateCell"
slot-scope="{date, data}">
<!--自定义内容-->
<div>
<div class="calendar-day">{
  
  { data.day.split('-').slice(2).join('-') }}</div>
<div v-for="item in calendarData">
<div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
<div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
<el-tooltip class=