显示效果

 

---

前言

 Elementui官方日历组件地址

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个是我其他业务使用的

后端返回的数据格式

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

三、显示

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

总结

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

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