elementui中日历样式调整

最新推荐文章于 2024-05-30 16:26:15 发布

miracleyaa

最新推荐文章于 2024-05-30 16:26:15 发布

阅读量556

点赞数

文章标签： elementui css vue.js

本文链接：https://blog.csdn.net/qq_43819719/article/details/124860276

版权

问题描述

提示：这里描述项目中遇到的问题：

elementui中日历样式调整

在这里插入图片描述

<div class="topCalendar">
                    <div class="year_month">
                        <el-date-picker prefix-icon="el-icon-arrow-down" :clearable="false" format="yyyy年"
                            v-model="yearData" type="year" size="small" style="margin-right:10px">
                        </el-date-picker>
                        <el-date-picker prefix-icon="el-icon-arrow-down" :clearable="false" format="M月"
                            v-model="monthData" type="month" size="small">
                        </el-date-picker>
                    </div>
                    <el-calendar class="calendar_box">
                        <template slot="dateCell" slot-scope="{data}">
                            <div class="timeClass">{{data.day.split('-').slice(2).join('')}}</div>
                        </template>
                    </el-calendar>
                </div>

.year_month {
        height: 34px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        /deep/.el-date-editor {
            width: 171px;

            .el-input__prefix {
                left: 140px;
            }
        }
    }

    .calendar_box {
        height: 349px;

        /deep/.el-calendar__body {
            padding-left: 0;
            padding-right: 0;

            .el-calendar-table {
                td {
                    border: none;
                }
            }

            .el-calendar-table .el-calendar-day {
                height: 50px;
                width: 45px;
                border-top: 1px solid rgba(0, 0, 0, 0.09);
            }
        }

    }

    .calendar_box/deep/ .el-calendar__header {
        display: none;
    }