Element—日历相关场景

丸子吖嘿

已于 2023-03-03 16:56:25 修改

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Element 文章标签： javascript 开发语言 ecmascript

于 2020-10-30 13:53:13 首次发布

本文链接：https://blog.csdn.net/qq_29050279/article/details/109383718

Element 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用Element UI的日历组件实现，通过插槽和计算属性展示了如何自定义日期单元格的内容，并根据数据动态显示司机安排。当鼠标悬停在日期上时，会弹出一个包含更多信息的气泡框，展示该日期的司机列表。代码示例中，还展示了如何处理数据和监听日历选择的变化，以便在切换月份时更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-calendar v-model="value" id="calendar">
   <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
   <template slot="dateCell" slot-scope="{date, data}">
       <!--date	单元格代表的日期  
       data{ type, isSelected, day}，type 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd -->
       <el-popover
           placement="right"
           width="200"
           trigger="hover"
           :disabled="formatSchedule(data).length<3"
           >
           <el-col :span="10" v-for="(item, index) in formatSchedule(data)" :key="index">{{item}}</el-col>
           <div slot="reference" style="height: 100%;overflow: hidden;">
               <p class="">{{ data.day.split('-').slice(2).join('-') }}</p>
               <p>{{formatSchedule(data)[0]}}</p>
               <p>{{formatSchedule(data)[1]}}</p>
               <p v-if="formatSchedule(data).length>2">...</p>
           </div>
      </el-popover>                               
   </template>
</el-calendar>

this.calendarData = [
   { day:'2020-10-01',drivers:['小明','高翔']},
   { day:'2020-10-03',drivers:['小明']},
   { day:'2020-10-31',drivers:['小明','高翔','戴绍华','小明','高翔','戴绍华','小明','高翔','戴绍华','小明','高翔','戴绍华']},
]
computed: {
   formatSchedule() {
       return data => {
           if(!this.calendarData) return []
           let drivers = [];
           this.calendarData.forEach(item => {
               if(item.day == data.day){
                   drivers = item.drivers
               }
           });
           return drivers
       }
   }
},
watch: {
    value: function() {
        let month = this.value.getMonth() + 1;
        //点击上下月
        if(month!=this.lastMonth){                   
            this.lastMonth = month
        }
    },
    lastMonth:function(){
        let year = this.value.getFullYear();
        let month = this.value.getMonth() + 1;
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        this.searchData.time = (year+'-'+month)
        this.searchList()//切换月份，重新请求数据
    }
},

效果：
在这里插入图片描述