[若依ruoyi-vue框架使用日历显示课程表]用Elementui Calendar日历显示课程数据- Calendar日历自定义内容

显示效果

文章目录

一、组件使用
二、发送请求获取数据-前端逻辑处理
三、显示
总结

前言

Elementui官方日历组件地址

Element – The world’s most popular Vue UI framework

一、组件使用

在页面中插入我们要的日历组件

通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）

     
      放假
      
                     {{ data.day.split('-').slice(1).join('-') }}           
           {{rqi.indexOf(data.day) > -1? rqineirong[data.day].content : ''}}

二、发送请求获取数据-前端逻辑处理

数据库字段–只用到前几个字段，后面3个是我其他业务使用的

[若依ruoyi-vue框架使用日历显示课程表]用Elementui Calendar日历显示课程数据- Calendar日历自定义内容

后端返回的数据格式

[若依ruoyi-vue框架使用日历显示课程表]用Elementui Calendar日历显示课程数据- Calendar日历自定义内容

我们需要通过课程时间，来获取到课程内容，所以数据发回前端的时候要处理成用课程时间来当key的一个数据结构，处理方式如下

1.发送请求+处理数据

 getList() {
      this.loading = true;
      listCourseSchedule(this.queryParams).then(response => {
        let data = response.rows;
        this.rqineirong = {};
        this.rqi = [];
        for(let i=0;i<data.length;i++){
          for(var key in data[i]){
            let rightKey=key.slice(0, 10)
            this.rqi.push(rightKey)
            this.rqineirong[rightKey] = data[i][key]
          }
        }
        //console.log(this.rqineirong)
      });
}

发送请求获取课程表数据的js--query目前是查询指定班级使用的，如果没有可以去除掉query和params

//查询课程表数据
export function listCourseSchedule(query) {
  return request({
    url: '/course/course/listCourseSchedule',
    method: 'get',
    params: query
  })
}