08/12 15:51

111

src/calendar.vue

@@ -0,0 +1,52 @@
+<template>
+  <div style='width:800px;'>
+    <el-calendar>
+      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+      <template slot="dateCell"
+                slot-scope="scope">
+        <p @click="showDate(scope)">
+          {{scope.data.day}}
+          <span v-for="(item,index) in dataList"
+                :key="index"
+                v-if="item.classDate === scope.data.day">
+            {{ item.startClassTimeStr.substring(0,5) +'-'+item.endClassTimeStr.substring(0,5)}}
+          </span>
+        </p>
+      </template>
+    </el-calendar>
+  </div>
+</template>
+<script>
+import { getCourseSchedule } from "@/api/buildTeam";
+export default {
+  data () {
+    return {
+      dataList: []
+    }
+  },
+  mounted () {
+    getCourseSchedule({ musicGroupId: '20052813552500001', rows: 100, page: 1 }).then(res => {
+      if (res.code === 200) {
+        this.dataList = res.data.rows
+      }
+    })
+  },
+  activated () {
+
+  },
+  methods: {
+    showDate (scope) {
+      console.log(scope)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+/deep/.el-calendar-day {
+  box-sizing: border-box;
+
+  p {
+    height: 100%;
+  }
+}
+</style>

src/router/index.js

@@ -83,6 +83,12 @@ export const constantRoutes = [
     hidden: true
   },
   {
+    path: '/calendar',
+    name: '日历调试',
+    component: () => import('@/calendar'),
+    hidden: true
+  },
+  {
     path: '/',
     redirect: '/main/main'
   },