【calendar日历组件】elementul的日历组件点击拿到对应的日期或者触发某些事件

elementul的日历组件文档没有写方法，文档很少，很多人一开始看是懵的。所以记录一下做法

图片

代码

思路：通过监听value的变化拿到对应的日期，同时可以根据这个监听触发对应的方法。

<template>
  <el-calendar v-model="value" id="calendar">
      <template
       slot="dateCell"
       slot-scope="{data}">
        <!--自定义内容-->
          <div>
             <div class="calendar-day" >{
    
    {
    
     data.day.split('-').slice(2).join('-') }}</div>
          </div>
      </template>
</el-calendar>
</template>
 
<script>
    export default {
    
    
        name: "calendar",
        data(){
    
    
            return {
    
    
                value: new Date()
            }
        },
        watch: {
    
    
            value: function() {
    
    
                var year = this.value.getFullYear();
                var month = this.value.getMonth() + 1;
                var date=this.value.getDate()
                if (date >= 1 && date <= 9) {
    
    //日如果小于10就补个0
                    date = "0" + date;
                }
                if (month >= 1 && month <= 9) {
    
    //月如果小于10就补个0
                    month = "0" + month;
                }
                console.log(year + '-' + month + '-' + date) // 打印出日历选中了哪年哪月
                this.getCalendarList()   //  调用接口，把拼接好的参数传到后台
            }
        },
        methods:{
    
    
          getCalendarList(){
    
    
            console.log('接口调用成功');
          }
        }
    }
</script>
<style>
    .calendar-day{
    
    
        text-align: center;
        color: #202535;
        line-height: 30px;
        font-size: 12px;
    }
    .is-selected{
    
    
        color: #F8A535;
        font-size: 10px;
        margin-top: 5px;
    }
    #calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after{
    
    
        content: '当月';
    }
</style>