feat:日历行数样式调整

张含笑

2025-07-23 483f61791d1ec7f65efad244527a1a3eab39bfec

feat:日历行数样式调整

 src/views/wel/components/calendarBox.vue

@@ -1,6 +1,9 @@
<template>
  <div class="calenBox">
    <el-calendar ref="calendar" v-model="currentMonth" >
    <el-calendar ref="calendar" v-model="currentMonth"  :class="{
    'five-rows': weeksNeeded === 5,
    'six-rows': weeksNeeded === 6
  }">
      <template #header="{ date }">
        <div>
          <img :src="caleft" alt="" @click="selectDate('prev-month')" />
@@ -205,7 +208,13 @@
    });
  }
};
const weeksNeeded = computed(() => {
  const firstDay = dayjs(currentMonth.value).startOf('month').day();
  const days = dayjs(currentMonth.value).daysInMonth();
  return Math.ceil((firstDay + days) / 7);
});

const isSixRows = computed(() => weeksNeeded.value > 5);
onMounted(() => {
  // 初始化时如果是当前月份，选中当天；否则不选中
  if (isCurrentMonth(currentMonth.value)) {
@@ -317,10 +326,16 @@
      font-size: 14px;
      color: #363636;
    }
    .el-calendar-table .el-calendar-day {
      height: pxToVh(88) !important;
    }

    // .el-calendar-table .el-calendar-day {
    //   height: pxToVh(88) !important;
    // }
 &.five-rows .el-calendar-table .el-calendar-day {
    height: pxToVh(88) !important;
  }
  
  &.six-rows .el-calendar-table .el-calendar-day {
    height: pxToVh(78) !important;
  }
    // 选中日期样式
    .el-calendar-table td.is-selected {
      .el-calendar-day {