Elementui Calendar日历组件实现在日期上自定义标记

朴灿烈づ我的快乐病毒、 2023-01-13 01:54 654阅读 0赞

### Calendar组件使用 ###

*  官网链接https://element.eleme.cn/\#/zh-CN/component/calendar
 *  效果图
 *  自定义参数使用
 *  代码

# [官网链接https://element.eleme.cn/\#/zh-CN/component/calendar][https_element.eleme.cn_zh-CN_component_calendar] #

# 效果图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]

# 自定义参数使用 #

dateCell scoped slot 参数 ： `data { type, isSelected, day}，`

*  type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；
 *  isSelected 标明该日期是否被选中；
 *  day 是格式化的日期，格式为 yyyy-MM-dd

显示在日历上日期方法：

data.day.split('-').slice(2).join('-')

# 代码 #

<template>
    	<div>
    		<el-col class="dayEL" :span="12">
              <el-calendar style="height: 530px;" v-model="nowdate">
                <template
                    slot="dateCell"
                    slot-scope="{date, data}">
                    <div style="width:100%;height: 100%;">
                      <div v-for="item in activeday" style="width: 0;height: 0px;">
                        <el-badge  v-if="data.day == item.dat" :value="item.coun"></el-badge>
                      </div>
                      <div class="spandate">{ {  data.day.split('-').slice(2).join('-') }}</div>
                    </div>
                  </template>
              </el-calendar>
            </el-col>
    	</div>
    </template>
    <script>
      import { getActivityCalendar} from '@/api/policy/home'
      export default { 
        data() { 
          return { 
            activeday:[],
            nowdate:new Date(),
          }
        },
        created() { 
          this.getActivityCalendar()
        },
        methods: { 
          getActivityCalendar(){ 
            getActivityCalendar(Object.assign({ 
              month: ''
            })).then(response => { 
              this.activeday = response.data.data
              // console.log(this.activeday)
              //返回数据为日期以及该日期对应的事件个数，用标记显示
            })
          },
        }
      }
    <style lang="scss" scoped>
      .dayEL .el-button--small { 
        border: none;
      }
      .dayEL .el-button { 
        background: transparent;
      }
      .dayEL >>> .el-calendar-table .el-calendar-day { 
          height: 70px;
      }
      .spandate { 
        margin-top: 10px;
        position: relative;
        top: 10px;
        margin-left: 25px;
        font-weight: bold;
        font-size: 16px;
      }
    
    </style>

[https_element.eleme.cn_zh-CN_component_calendar]: https://element.eleme.cn/#/zh-CN/component/calendar
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]: /images/20221022/13f7da3a50044709a923df7b19b982bf.png