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

清疚 2023-09-30 19:04 18阅读 0赞

## 显示效果 ##

![de42b0e613fb4e9b88c2e1dfddaaf7d4.png][]

#### 文章目录 ####

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

--------------------

## 前言 ##

Elementui官方日历组件地址

[Element - The world's most popular Vue UI framework][Element - The world_s most popular Vue UI framework]

--------------------

## 一、组件使用 ##

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

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

<el-calendar>
          <a style="color: black; background: yellow;">放假</a>
          <template
            slot="dateCell"
            slot-scope="{date, data}">
            <p :class="rqi.indexOf(data.day) > -1  ? 'is-selected' : ''" @click="handleBianJi(data.day)">
                 {
       { data.day.split('-').slice(1).join('-') }} 
              </br>
     
              {
       {rqi.indexOf(data.day) > -1? rqineirong[data.day].content : ''}}
                </p>
          </template>
        </el-calendar>

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

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

![5f9539e23a6e412783dd680c522cf4cd.png][]

后端返回的数据格式

![9842fd7405dc4a8fa36680ae84e0360d.png][]

我们需要通过课程时间，来获取到课程内容，所以数据发回前端的时候要处理成用课程时间来当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
      })
    }

### 三、显示 ###

完成这些操作后就可以显示了

![1d9e844581f04777a57250223eb59942.png][]

## 总结 ##

整个过程最难的就是前端需要处理数据，将数据转换成课程时间为key的数据格式，这个也可以交给后端处理。

上面使用组件的时候还用到了@click="handleBianJi(data.day)，这个点击对应的日期可以进行编辑操作的按键，这个功能后期在更新文章，如果需要详细代码的可以点个关注在评论区留言。

![5ea0d036c1a948499b6b1cbdc4bd6fc2.png][]

[de42b0e613fb4e9b88c2e1dfddaaf7d4.png]: https://img-blog.csdnimg.cn/de42b0e613fb4e9b88c2e1dfddaaf7d4.png
[Element - The world_s most popular Vue UI framework]: https://element.eleme.cn/#/zh-CN/component/calendar
[5f9539e23a6e412783dd680c522cf4cd.png]: https://img-blog.csdnimg.cn/5f9539e23a6e412783dd680c522cf4cd.png
[9842fd7405dc4a8fa36680ae84e0360d.png]: https://img-blog.csdnimg.cn/9842fd7405dc4a8fa36680ae84e0360d.png
[1d9e844581f04777a57250223eb59942.png]: https://img-blog.csdnimg.cn/1d9e844581f04777a57250223eb59942.png
[5ea0d036c1a948499b6b1cbdc4bd6fc2.png]: https://img-blog.csdnimg.cn/5ea0d036c1a948499b6b1cbdc4bd6fc2.png