修改element日历的样式

最新推荐文章于 2023-09-14 16:31:44 发布

别来…无恙

最新推荐文章于 2023-09-14 16:31:44 发布

阅读量2.6k

点赞数 1

分类专栏：样式文章标签： css elementui

本文链接：https://blog.youkuaiyun.com/qq_43942185/article/details/117957105

版权

这篇博客介绍了如何在Vue项目中，利用/deep/深度选择器在scoped内修改Element UI的日历组件样式，包括去除表格内边距、更改今日、选中日期和上下月日期的显示，以及调整星期显示，从而实现定制化而不影响全局样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

需要修改element中el-calendar的表头还有选中的样式，但要求不影响其它页面，也就是要求写在 scoped 里面。

安排：

使用 /deep/ 的深度监听机制实现在 scoped 修改页面样式并不影响其它页面。

// 除去日历表格的padding
  /deep/ .el-calendar-table .el-calendar-day{
   
    padding: 0;
  }
 // 修改当天日期样式
  /deep/ .el-calendar-table td.is-today{
   
    background-color: #fff;
  }
  // 修改选中日期样式
  /deep/ .el-calendar-table