Element UI-Calendar日历只显示当前月

最新推荐文章于 2024-07-02 11:54:54 发布

itmacy

最新推荐文章于 2024-07-02 11:54:54 发布

阅读量1.5k

点赞数 1

分类专栏： Element UI 文章标签： ui elementui

本文链接：https://blog.csdn.net/itmacy/article/details/134141964

版权

Element UI 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

通过css样式控制不显示上一个月和下一个月的天数，并且不可点击

        <el-calendar v-model="calendarValue">
            <template
                slot="dateCell"
                slot-scope="{date, data}">
                <p>
                    <template>
                        <span>{{ data.day.split('-').slice(2).join('-') }}</span>
                    </template>
                </p>
            </template>
        </el-calendar>

css样式，这里使用的是scss

::v-deep .el-calendar-table:not(.is-range) td.prev,
::v-deep .el-calendar-table:not(.is-range) td.next {
    cursor: not-allowed;
    pointer-events: none;
}
.prev>.el-calendar-day>p{
    display: none;
}
.next>.el-calendar-day>p{
    display: none;
}