fix(Calendar): should not render all months on mounted (#7564)

src/calendar/components/Month.js

@@ -26,7 +26,6 @@ export default createComponent({
     currentDate: [Date, Array],
     allowSameDay: Boolean,
     showSubtitle: Boolean,
-    realRowHeight: Number,
     showMonthTitle: Boolean,
     firstDayOfWeek: Number,
   },
@@ -66,15 +65,13 @@ export default createComponent({
       return this.visible || !this.lazyRender;
     },
 
-    monthStyle() {
-      if (!this.shouldRender) {
-        const padding =
-          Math.ceil((this.totalDay + this.offset) / 7) * this.realRowHeight;
-
-        return {
-          paddingBottom: `${padding}px`,
-        };
+    placeholders() {
+      const rows = [];
+      const count = Math.ceil((this.totalDay + this.offset) / 7);
+      for (let day = 1; day <= count; day++) {
+        rows.push({ type: 'placeholder' });
       }
+      return rows;
     },
 
     days() {
@@ -104,23 +101,6 @@ export default createComponent({
     },
   },
 
-  watch: {
-    shouldRender(value) {
-      if (value) {
-        this.$nextTick(() => {
-          if (this.$refs.day[0] && !this.realRowHeight) {
-            const { height } = this.$refs.day[0].getBoundingClientRect();
-            this.$emit('update-height', height);
-          }
-        });
-      }
-    },
-
-    realRowHeight() {
-      this.height = null;
-    },
-  },
-
   methods: {
     getHeight() {
       if (!this.height) {
@@ -238,6 +218,11 @@ export default createComponent({
         height: this.rowHeightWithUnit,
       };
 
+      if (type === 'placeholder') {
+        style.width = '100%';
+        return style;
+      }
+
       if (index === 0) {
         style.marginLeft = `${(100 * this.offset) / 7}%`;
       }
@@ -266,22 +251,19 @@ export default createComponent({
     },
 
     genMark() {
-      if (this.showMark) {
+      if (this.showMark && this.shouldRender) {
         return <div class={bem('month-mark')}>{this.date.getMonth() + 1}</div>;
       }
     },
 
     genDays() {
-      if (this.shouldRender) {
-        return (
-          <div ref="days" role="grid" class={bem('days')}>
-            {this.genMark()}
-            {this.days.map(this.genDay)}
-          </div>
-        );
-      }
-
-      return <div ref="days" />;
+      const days = this.shouldRender ? this.days : this.placeholders;
+      return (
+        <div ref="days" role="grid" class={bem('days')}>
+          {this.genMark()}
+          {days.map(this.genDay)}
+        </div>
+      );
     },
 
     genDay(item, index) {
@@ -304,8 +286,6 @@ export default createComponent({
       if (type === 'selected') {
         return (
           <div
-            ref="day"
-            refInFor
             role="gridcell"
             style={style}
             class={[bem('day'), item.className]}
@@ -330,8 +310,6 @@ export default createComponent({
 
       return (
         <div
-          ref="day"
-          refInFor
           role="gridcell"
           style={style}
           class={[bem('day', type), item.className]}
@@ -348,7 +326,7 @@ export default createComponent({
 
   render() {
     return (
-      <div class={bem('month')} ref="month" style={this.monthStyle}>
+      <div class={bem('month')} ref="month">
         {this.genTitle()}
         {this.genDays()}
       </div>