运用element 日历组件

开发时调用element日历组件，需获取上月，下月，本月数据

1、给el-calendar绑定month

<el-calendar v-model="month">
      <template slot="dateCell" slot-scope="{date, data}">
        <div style="width: 100%;height: 100%;" @click="DataClick(data.day)">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split('-').slice(1).join('-') }}
          </p>
        </div>
      </template>
    </el-calendar>

在data设置month的基础月份日期

month: moment().format('YYYY-MM'),

监听month触发情况

 watch: {
    month(val, oldVal) {//监听日历时间组件
      if (
        val &&
        moment(val).format("YYYY-MM") == moment().format("YYYY-MM")
      ) {
        this.time = moment(val).format("YYYY-MM-DD")
        // console.log(this.time,'点击了本月');
        this.$emit('mouthTime', this.time)
      } else if (
        val &&
        moment(val).toDate() < moment(oldVal).startOf("month").toDate()
      ) {
        // console.log(this.time,'点击了上个月');
        this.time = moment(this.time).subtract(1, 'months').format('YYYY-MM-DD');
        this.$emit('mouthTime', this.time)
      } else if (
        val &&
        moment(val).toDate() > moment(oldVal).endOf("month").toDate()
      ) {
        this.time = moment(this.time).subtract(-1, 'months').format('YYYY-MM-DD');
        // console.log(this.time, '点击了下个月');
        this.$emit('mouthTime', this.time)
      }
    },
  },

我这里设置了time接受上月日期，同时使用了emit方法传给父级再去调用接口。

这里点击本月就是el-calendar组件中当天的日期。

本方法调用详细月份正确，但详细日期会有问题，需要后端进行处理一下查当月任意一天都是查当月数据就好了

DataClick(e) {
      console.log("点击了" + e + "天");
    },

加上自定义方法就可以获取到点击的详细日期了哦。

如有用，请点个赞哦。一起学习。