ElementUI 日历的官方文档点击这里
官方文档的内容在此省略

目的-修改日历尺寸

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

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

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

解决方法

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

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

代码截图
最终效果如下图所示,大致解决了问题。
ElementUI日历尺寸修改

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐