ElementUI 日历的官方文档

点击这里


官方文档的内容在此省略

目的-修改日历尺寸

现项目某功能需要使用日历插件显示日程安排，但ElementUI自带的尺寸太大，在网上试了几种方式去修改都不是很理想。

宽度的话使用width属性，可以进行调节；主要难点在于高度的调节。

直接修改height属性时，日历并不会随着高度的改变而自适应地改变高度，如下所示。

解决方法

使用深度选择器 /deep/ 去修改日历中每天的尺寸，详细CSS代码如下：

  .test /deep/  .el-calendar-table .el-calendar-day{
    width: 60px;
    height: 40px;
  }

最终效果如下图所示，大致解决了问题。