[ruoyi-vueフレームワークに従ってカレンダーを使用してコーススケジュールを表示する場合] Elementui Calendarカレンダーでコースデータを表示する - カレンダーカレンダーカスタムコンテンツ

ディスプレイ効果

 

記事ディレクトリ

• 1.コンポーネントの使用
• 2.データを取得するためのリクエストの送信 - フロントエンド ロジック処理
• 3. 表示
• 要約する

---

序文

 Elementui 公式カレンダー コンポーネントのアドレス

Element - 世界で最も人気のある Vue UI フレームワーク

​

---

1. コンポーネントの使用

必要なカレンダーコンポーネントをページに挿入します

名前付き を設定して、  カレンダー セルに表示される内容をカスタマイズしますdateCell 。  日付 (現在のセルの日付)、データ (type、isSelected、day 属性を含む) を取得scoped-slotできます 。scoped-slot

     <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. データを取得するためのリクエストの送信 - フロントエンド ロジック処理

データベース フィールド -- 最初のいくつかのフィールドのみが使用され、最後の 3 つは他のビジネスで使用されます

バックエンドから返されるデータ形式

コースタイムを通じてコース内容を取得する必要があるため、フロントエンドにデータを送り返す際に、コースタイムをキーとしたデータ構造に加工する必要があります。

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

3. 表示

これらの操作が完了すると表示できるようになります

要約する

全体のプロセスの中で最も難しいのは、フロントエンドでデータを処理し、コースタイムをキーにデータ形式に変換する必要があることですが、これをバックエンドに引き継いで処理することもできます。

上記のコンポーネントを使用する場合、 @click="handleBianJi(data.day) も使用されます。対応するボタンをクリックして日付を編集します。この機能は後で記事を更新します。詳細なコードが必要な場合は、コメントエリアのメッセージ。