element-ui ＜el-calendar＞＜/el-calendar＞ 样式设置

记录使用element-ui 的<el-calendar> 事件及样式






1、设置图示按钮渲染和触发的点击事件

 

mounted() {
this.$nextTick(() => {
  // 点击上个月
  let prevBtn1 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
  prevBtn1.addEventListener('click',() => {
    consolo.log('上个月');
  })
  // 点击今天
  let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
  prevBtn2.addEventListener('click',() => {
    consolo.log('今天');
  })
  // 点击下个月
  let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
  prevBtn3.addEventListener('click',() => {
    consolo.log('下个月');
  })
})
}

2、设置样式

<style scoped>
/*（选中下个月的日历单元格）修改当前日历页面中，下个月日历单元格的样式*/
/*禁止点击日历中灰色单元格*/
/deep/ .el-calendar-table:not(.is-range) td.next{
  pointer-events: none;
}
/*（选中上个月的日历单元格）修改当前日历页面中，上个月日历单元格的样式*/
/deep/ .el-calendar-table:not(.is-range) td.prev{
  pointer-events: none;
}


/*自定义表头中的星期样式*/
/deep/ .el-calendar-table thead th:before{
  content: '星期';
}
/*设置单元格样式（宽、高，边框）*/
/deep/ .el-calendar-day {
  height: 120px !important;
  border: none;
}

/*日历单元格鼠标悬停背景颜色*/
/*/deep/ .el-calendar-table .el-calendar-day:hover {*/
/*     background-color: red;*/
/*   }*/
</style>