首页 > 网络编程 > JavaScript > javascript类库 > vue.js > elementui el-calendar日历组件

element ui el-calendar日历组件使用方法总结

2023-07-26 16:02:49 作者：欧阳呀

这篇文章主要给大家介绍了关于element ui el-calendar日历组件使用方法的相关资料,elementui是一款基于Vue.js的UI框架,其中的日历组件calendar是elementui中非常常用的组件之一,需要的朋友可以参考下

1. 需求说明

按月显示，每次只显示一个月的日期，其余隐藏

日历组件的显示时间随着上方选择框的变化（比如我切换到6月份，下面也要同步切换到6月份）

点击某一天可以添加事项（如果是空白的，未添加的），展示在对应的框里，同时添加悬浮展示的组件

如果是点击有事项的，则是编辑事项（这里展示的是不同的弹框）

每一月的数据存到数据库

2. 基础实现

这里做的是数据渲染，以及事件绑定，新增与编辑是点击不同的地方

     <el-calendar v-model="value">
          <template slot="dateCell" slot-scope="{ date, data }">
            <div class="main-cd" @click="addPlan()">
              <div class="calendar-day">
                {{ data.day.split("-").slice(2).join("-") }}
              </div>
              <div
                v-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">
                      <div
                        v-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>

3. 只展示当月数据

这个其实官网有说明

但实际做起来是比较麻烦的，后面审查元素，找到了新大陆：

不同月份的日期是有不同的 class 标识的，一个邪恶的想法便出来了，那用 css 就可以搞定，何必费劲巴拉的写 js

算是走了个捷径吧，仅供参考，代码如下：

  ::v-deep .el-calendar-table:not(.is-range) td.next {
    display: none;
  }
  ::v-deep .el-calendar-table:not(.is-range) td.prev {
    visibility: hidden;
  }

4. 动态切换日历里的数据实现

这个就更简单了，监听输入框的时间变化，传入日历组件的model 即可，代码如下：

monthChange(val) {
  // 这里是监听时间变化 => @change="monthChange"，然后传入日历组件
  this.value = val;
  // 时间切换的时候，顺便调个接口查询当月数据
  this.editDetail();
},

5. 顺便把快捷方式隐藏了，不让用户选择上一个月下一个月

因为在此处的需求，需要手动查询，根据上方时间变化匹配对应数据
所以用户点这个玩意也费劲，还要加事件监听，费力不讨好了
实现也很简单，还是 css 搞定（审查元素就行了），代码如下：

  ::v-deep .el-calendar__button-group {
    display: none;
  }

总结

到此这篇关于element ui el-calendar日历组件使用方法的文章就介绍到这了,更多相关elementui el-calendar日历组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！