element中calendar组件自定义显示（例如：日期上面显示工作负责人）vue+element自定义日历

小白_ysf

于 2024-02-01 13:39:01 发布

阅读量1.4k

点赞数 9

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

本文链接：https://blog.youkuaiyun.com/weixin_41549971/article/details/135972103

版权

1. 属性了解（更多）

在这里插入图片描述

2. 代码实现

<template>
    <div class="CalendarPage">
        <!-- 按年月筛选，默认当前月份 -->
        <el-date-picker v-model="queryParams.month" type="month" placeholder="选择年月" format="yyyy-MM"
                        value-format="yyyy-MM" style="width:100%" :clearable="false" @change="monthHandle">
                    </el-date-picker>
        <div class="calendar-box">
            <div class="calendar-title">
                {
  { calendarTitle }}
            </div>
            <div class="calendar-main">
                <!-- queryParams.month 控制日历显示那个月 -->
                <el-calendar :value="queryParams.month">
                    <template slot="dateCell" slot-scope="{date, data}">
                        <div class="cell-box" @click="selectUser(data)">
                            <div class="cell-time">
                                {
  { Number(data.day.slice(8, 10)) }}
                            </div>
                            <div v-for="(item,