el-calendar隐藏默认的快捷按钮样式以及非当前月不可点击

初心w50t2

于 2024-07-24 17:03:01 发布

阅读量134

点赞数 2

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41910413/article/details/140667800

版权

VUE 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<el-calendar v-model="item.value">

css代码：

<style lang="scss" scoped>
::v-deep .el-calendar {
  /* 隐藏默认的快捷按钮样式 */
  .el-calendar__header {
    justify-content: center;
  }
  .el-calendar__header .el-calendar__button-group {
    display: none;
  }

  /* 非当前月不可点击 */
  .el-calendar-table {
    &:not(.is-range) {
      td.next {
        pointer-events: none;
      }
      td.prev {
        pointer-events: none;
      }
    }
  }
}
</style>