此篇文章是关于element-plus里边的日历组件el-calendar的宽高怎么设置

先来一个日历

<el-calendar ref="calendar" style="width: 100%;height: 100%;">
    <template #header="{ date }">
      <el-button size="small" @click="selectDate('prev-year')">
        上一年
      </el-button>
      <el-button size="small" @click="selectDate('prev-month')">
        上个月
      </el-button>
      <span align="center">{{ date }}</span>
      <el-button size="small" @click="selectDate('next-month')">
        下个月
      </el-button>
      <el-button size="small" @click="selectDate('next-year')">
        下一年
      </el-button>
    </template>
  </el-calendar>

下面是ts代码

import { ref } from 'vue'
import type { CalendarDateType, CalendarInstance } from 'element-plus'

const calendar = ref<CalendarInstance>()
function selectDate(val: CalendarDateType) {
  if (!calendar.value) { return }
  calendar.value.selectDate(val)
}

以上实现一个自定义头部的日历,官方文档里边也有,只是简单的拿过来了而已,下面来说一下怎么修改他的宽高

通过设置.el-calendar-table .el-calendar-day来修改他的宽高

.el-calendar-table .el-calendar-day {
  width: 100%;
每一个的高
  height: 50px;
  text-align: center;
}

总结:以上就是简单的通过element-plus实现一个自定义头部,自定义宽高的日历,简单版