系列教程之ElementUI Calendar日历使用例子

最新推荐文章于 2024-12-24 14:00:24 发布

原创

最新推荐文章于 2024-12-24 14:00:24 发布 · 8.6k 阅读

17 ·

CC 4.0 BY-SA版权

本文介绍如何使用Element UI的日历组件，并通过自定义日期单元格展示特定日期的相关事件，包括电影、野炊等活动，以及如何通过日历显示特定日期的备注，如放假、交电费等。

例子1：

<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="item" effect="dark" :content="item.things" placement="right">
                               <div class="is-selected">{
  
  {item.things}}</div>