vue中使用element日历组件的示例代码 vue中使用element日历组件的示例

先看下效果图：

文章图片

文章图片

文章图片

完整代码附上

@import "../../../style/backTable.less"; #famerCalendar /deep/ .el-calendar-table {width: 100%; height: 100%; &:not(.is-range) {//使不是本月的日期不可点击，不会跳转到其他月份td.next {pointer-events: none; }td.prev {pointer-events: none; }}}.calendarBody {width: 100%; height: 81vh; }#famerCalendar .newSeeds {height: 90vh; }#famerCalendar /deep/ .el-calendar__header {justify-content: space-between; padding: 12px 20px; border: none; text-align: center; background: #00284d; display: block; }#famerCalendar /deep/ .el-button-group {display: none; }#famerCalendar /deep/ .el-calendar__title {color: #fff; align-self: center; line-height: 3vh; }#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n) {background: #5c768d; color: #fff; padding: 1vh 0; }#famerCalendar /deep/ .el-calendar-table thead th:nth-of-type(2n + 1) {background: #335371; color: #fff; padding: 1vh 0; }#famerCalendar /deep/ .el-calendar__body {padding: 0; }#famerCalendar .title-bottom /deep/ .el-input--prefix .el-input__inner {padding-left: 3vw; width: 75%; /* height: 4vh; line-height: 4vh; */}#famerCalendar /deep/ .el-date-editor.el-input,.el-date-editor.el-input__inner {width: 10vw; }#famerCalendar .timeFilter {position: relative; }#famerCalendar /deep/ .el-calendar-table td {text-align: right; }#famerCalendar /deep/ .el-calendar-table .el-calendar-day {box-sizing: border-box; // padding: 1vh; padding: 0; height: 11.5vh; }#famerCalendar /deep/ .el-calendar-table .el-calendar-day > p {box-sizing: border-box; padding: 1vh; }#famerCalendar /deep/ .timeFilter:after {min-width: 2vw; white-space: nowrap; content: "日期"; border-right: 1px solid #c0c4cc; padding: 0 0.2vw; box-sizing: border-box; /* line-height: 4vh; */}#famerCalendar /deep/ .el-drawer__open .el-drawer.rtl:focus-visible {border: none; }#famerCalendar /deep/ .el-drawer__header:focus-visible {border: none; }.cellInfoUl {width: 80%; height: 100%; overflow: hidden; overflow-y: scroll; }.cellInfoUl::-webkit-scrollbar {display: none; }.cellInfo {position: relative; width: 100%; height: 100%; display: flex; justify-content: space-between; padding: 1vh; box-sizing: border-box; }.tipMsg {position: absolute; display: flex; right: 0vh; bottom: 0vh; width: 2vw; height: 2vw; color: #fff; }.tipMsged {position: absolute; top: 50%; left: 50%; z-index: 100; transform: translate(-10%, -20%); }.tipMsg::before {content: ""; position: absolute; top: 0; left: 0; height: 0px; width: 0px; border-top: solid 2vw transparent; border-left: solid 2vw #3999e6; transform: rotateZ(-90deg); }.cellInfoUl li {width: 100%; line-height: 2.5vh; color: #fff; background: #61adeb; margin-bottom: 1vh; padding: 0 0.5vw; box-sizing: border-box; border-radius: 16px; text-align: center; }.cellInfoBox {text-align: center; /* color: #; */}.modeEach {width: 100%; padding: 2vh 1vw; box-sizing: border-box; height: 78vh; overflow: hidden; overflow-y: scroll; }.modeEach::-webkit-scrollbar {display: none; }.footBox {width: 100%; padding: 2vh 1vw; box-sizing: border-box; }.modeEachs {width: 100%; min-height: 18vh; background: #3999e6; border-radius: 6px; padding: 2vh 1vw; box-sizing: border-box; position: relative; margin-bottom: 1vh; }.setI {position: absolute; top: 1vh; right: 0.5vw; background: #fff; width: 2.5vh; height: 2.5vh; border-radius: 50%; text-align: center; line-height: 2.5vh; color: red; }.setIs {top: 1vh; right: 2vw; color: #3999e6; }.modeEachs span {font-size: 1.3vh; font-family: Source Han Sans CN; font-weight: 400; color: #ffffff; line-height: 2.78vh; }.modeEachs span:nth-of-type(1) {min-width: 3vw; display: inline-block; }.footBox {text-align: right; }.emptyState {width: 100%; height: 60%; text-align: center; }.emptyState img {width: 80%; min-height: 100%; }.modeEached {text-align: center; }.modeEached p {font-size: 1.67vh; font-family: Source Han Sans CN; font-weight: 400; color: #666666; line-height: 2.78vh; }.shadowBox {box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.15); padding: 1vh; box-sizing: border-box; }