自定义组件，使得element-ui组件Calendar仅渲染当月

使用方法
1.复制 cm-calendar 文件夹及内容到自己项目中
2.在要使用的页面上引入组件（路径根据自己情况修改）：

3.在 页面的 components 中注册组件：

4.与 el-calendar 的使用方法完全相同，只是把组件名换成 CMCalendar

闭坑
不同element-ui的版本如果引入后无效，解决方法是：检查一下下面的文件

在部分elementui的版本中，这个文件名字叫：data-table.vue，这时候需要修改一下cm-datatable.vue的第3行。

-----------------------cm-datatable.vue----------------

<script>
import DateTable from 'element-ui/packages/calendar/src/dataTable.vue';
import { range as rangeArr } from 'element-ui/src/utils/date-util';
export default {
  extends: DateTable,
  methods: {
    toNestedArr(days) {
      let nextDays = days.filter(d => d.type=='next').length;
      if (nextDays >= 7) {
        days = days.slice(0, days.length - 7);
      }
      return rangeArr(days.length / 7).map((_, index) => {
        const start = index * 7;
        return days.slice(start, start + 7);
      });
    },
    cellRenderProxy({ text, type }) {
      if (type != 'current') {
          return <span></span>
      }
      let render = this.elCalendar.$scopedSlots.dateCell;
      if (!render) return <span>{ text }</span>;
      const day = this.getFormateDate(text, type);
      const date = new Date(day);
      const data = {
        isSelected: this.selectedDay === day,
        type: `${type}-month`,
        day
      };
      return render({ date, data });
    },
    pickDay({ text, type }) {
      const date = this.getFormateDate(text, type);
      if (type && type==='current') {
        this.$emit('pick', date);
      }
    },
  }
};
</script>
<style scoped>
.next .el-calendar-day:hover, .prev .el-calendar-day:hover {
    background-color:transparent;
    cursor: auto;
}
</style>

--------------------index.vue---------------

<script>
import { Calendar } from 'element-ui'
import DateTable from './cm-datatable';
export default {
  extends: Calendar,
  name: 'CMCalendar',
  components: {
    DateTable
  }
};
</script>