efecto de visualización

Directorio de artículos

1. Uso de componentes
2. Enviar una solicitud para obtener datos: procesamiento lógico front-end
3. Mostrar
Resumir

prefacio

Dirección del componente del calendario oficial de Elementui

Element: el marco de interfaz de usuario de Vue más popular del mundo

1. Uso de componentes

Insertar el componente de calendario que queramos en la página.

Personalice lo que se muestra en la celda del calendario configurando el nombre dateCell . scoped-slotPuede scoped-slot obtener la fecha (la fecha de la celda actual), datos (incluido el tipo, isSelected, atributos del día)

     <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>

2. Enviar una solicitud para obtener datos: procesamiento lógico front-end

Campos de la base de datos: solo se utilizan los primeros campos y mis otras empresas utilizan los tres últimos.

El formato de datos devuelto por el backend.

Necesitamos obtener el contenido del curso a través del tiempo del curso, por lo que cuando los datos se envían de regreso al front-end, deben procesarse en una estructura de datos que utiliza el tiempo del curso como clave. El método de procesamiento es el siguiente

1. Enviar solicitud + datos del proceso

 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
  })
}

3. Mostrar

Después de completar estas operaciones, se puede mostrar

Resumir

La parte más difícil de todo el proceso es que el front-end necesita procesar los datos y convertirlos a un formato de datos con el tiempo del curso como clave, que también se puede entregar al back-end para su procesamiento.

Cuando se utiliza el componente anterior, también se utiliza @click="handleBianJi(data.day). Haga clic en el botón correspondiente para editar la fecha. Esta función actualizará el artículo más adelante. Si necesita un código detallado, puede prestarle atención en el mensaje del área de comentarios.

[Si usa el calendario para mostrar el cronograma del curso de acuerdo con el marco ruoyi-vue] Muestre los datos del curso con el contenido personalizado del calendario del calendario Elementui Calendar-Calendar