按老师展示的教学排课表

fangcaojushi

已于 2024-03-08 17:18:50 修改

阅读量853

点赞数 24

分类专栏： vue.js 文章标签： vue.js

于 2023-12-20 18:31:52 首次发布

本文链接：https://blog.csdn.net/fangcaojushi/article/details/135113958

版权

vue.js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

按老师展示的教学排课表

项目需求
知识要点
老师排课表完整的代码

项目需求

按老师展示的教学排课表，周一到周五背景黄，周六背景桔，周日背景蓝，上午、下午、晚上浅入深的三色，相同的课合并单元格，有课的背景为绿色，并且点击跳转路由，进入该班的学生情况页。

展示效果

在这里插入图片描述

数据的结构体

后端返回的

在这里插入图片描述

el-table表格需要的，重构一行的结构teacher老师，classId班级id,点击跳转时用

在这里插入图片描述

知识要点

表头行的背景色

【类型】Function({row, rowIndex})/String
【说明】表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的className。

header-cell-class-name="hdbg"

不同行的背景色

【类型】Function({row, rowIndex})/String
【说明】行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。

// 视图<el-table>中
:row-class-name="tableRowClassName"
// script method方法中
// 行背景色
    tableRowClassName({row, rowIndex}) {
      let _week=row.week
      let _time=row.time
      if (_week === '周六' || _week === '周日') {
        return this.getBgColorName(_week,_time);
      } else {
        return 'midbg';
      }
      return '';
    },

单元格的背景色

【类型】Function({row, column, rowIndex, columnIndex})/String
【说明】单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。

/ 视图<el-table>中
:cell-class-name="tableCellClassName"
// script method方法中
// 单元格背景色
tableCellClassName({row, column, rowIndex, columnIndex}){
      //利用单元格的 className 的回调方法，给行列索引赋值
      row.index=rowIndex
      column.index=columnIndex
      let idx=columnIndex-2
      if(columnIndex>1){
        if(row[`teacher${idx}`]){
          return 'cellbg'
        }
      }
      if(columnIndex==0){
        let _val=row.week
        if(_val=='周六') return 'satbg-nm'
        if(_val=='周日') return 'sunbg-nm'
      }
    },

单元格的点击事件

/ 视图<el-table>中
@cell-click="handleCellClick"
// script method方法中
// 单元格的点击事件
handleCellClick(row, column, cell, event) {
      // console.log('row====',row.index)
      // console.log('column====',column.index)
      // console.log('Row data: ', row)
      // console.log('Column property: ', column.property)
      // console.log('Cell content: ', cell.textContent)
      let idx= column.property.slice(7)
      let curClassId=row[`classId${idx}`]
      this.$router.push({path:'/classManage/studentJoinClass',query:{classId:curClassId}})
    },

重构数据

computed: {
    buildData() {
      // this.getSpanArr(this.tableData, this.mergedColumns)
      // return this.tableData
      let data=this.tableData
      if(!data) return
      let datas = this.flattenArray(data)
      console.log("重构后的data===",datas)
      this.getSpanArr(datas, this.mergedColumns)
      return datas
    }
  },
methods:{
	flattenArray(arr) {
      let result=[]
      arr.forEach((obj,xh)=>{
        let one=xh.toString()
        const { classNameArr: child, classIdArr: child2, time, week } = obj;
        
        if(child && child.length>0){
          let childObj = {}
          child.forEach((item,index)=>{
          // 将数组转对象
          // [1,2,3]
          // 转后：{ls0:1,ls1:2,ls2:3}        
            childObj[`teacher${index}`] = item
          })
          let childObj2 = {}
          child2.forEach((item,index)=>{
            childObj2[`classId${index}`] = item
          })
          result.push({ time, week, ...childObj,...childObj2});
        }
      })
      // console.log("result===",result)
      return result;
    },
}

合并单元格

合并单元格的就不在重复，可参见我之前写的。
一级数据版
https://editor.csdn.net/md/?articleId=134325858
多层嵌套版
https://editor.csdn.net/md/?articleId=134537748

老师排课表完整的代码

<template>
  <div>
    <el-table border
     :header-cell-style="{'text-align':'center'}"
     :cell-style="{'text-align':'center'}"
     :row-class-name="tableRowClassName"
     :cell-class-name="tableCellClassName"
     header-cell-class-name="hdbg"
     :data="buildData"
     :span-method="objectSpanMethod"
     @cell-click="handleCellClick">
      <el-table-column prop="week" label="上课日期" width="80" fixed="left" />
      <el-table-column prop="time" label="上课时间" width="120" fixed="left" :background-color="cellBackgroundColor" />
      <template v-if="teacherData.length>0" v-for="(item,index) in teacherData.length">
        <el-table-column :prop="`teacher${index}`" :label="teacherData[index]" />
      </template>
    </el-table>
    <!-- <img src="../../assets/aa.png"/> -->
  </div>
</template>

<script>
import { statisticScheduling} from '@/api/statistics/home'

export default {
  data() {
    this.spanMap = {};
    // this.mergedColumns = ["week"]
    return {
      mergedColumns:["week"],
      teacherData: [],
      tableData: [
        // {
        //   week: '周一至五',
        //   time: '周二16:30-18:30',
        //   classNameArr: ['','大学路周三G0C','福州路普及组C++2207'],
        //   classIdArr:['','1727937533019389953','1729769986474246145'],
        // },
        // {
        //   week: '周一至五',
        //   time: '周三16:30-18:30',
        //   classNameArr: ['','大学路周三G0C','福州路普及组C++2207'],
        //   classIdArr:['','1727937533019389953','1729769986474246145'],
        // },
        // {
        //   week: '周一至五',
        //   time: '周三16:30-18:30',
        //   teacher1: '大学路小学C10528',
        //   teacher2: '大学路周三',
        //   teacher0: ''
        // },
        // {
        //   week: '周六',
        //   time: '8:30',
        //   teacher1: '大学路小学C+210528',
        //   teacher2: '大学路C',
        //   teacher0: '福州路小学C+20220702刘洪瑞'
        // },

      ],
      selectedCellIndex: null
    };
  },
  computed: {
    buildData() {
      // this.getSpanArr(this.tableData, this.mergedColumns)
      // return this.tableData
      let data=this.tableData
      if(!data) return
      let datas = this.flattenArray(data)
      // console.log("重构后的data===",datas)
      this.getSpanArr(datas, this.mergedColumns)
      return datas
    }
  },
  watch:{
    teacherData(newVal,oldVal){
      newVal.forEach((item,index)=>{
        this.mergedColumns.push('teacher'+index)
      })
      // console.log(this.mergedColumns)
    }
  },
  mounted() {
    // this.teacherData= ['张强', "刘江峰", "董清营"]
    this.statisticSchedulingFun()
  },
  methods: {
    statisticSchedulingFun(){
      statisticScheduling().then(res=>{
        console.log("接口请求的原始数据===",res)
        this.teacherData = res.teacherNameList
        this.tableData = res.schedulingInfoList
      })
    },
    flattenArray(arr) {
      let result=[]
      let id=''
      arr.forEach((obj,xh)=>{
        let one=xh.toString()
        const { classNameArr: child, classIdArr: child2, time, week } = obj;
        if(child && child.length>0){
          let childObj = {}
          child.forEach((item,index)=>{
            childObj[`teacher${index}`] = item
          })
          let childObj2 = {}
          child2.forEach((item,index)=>{
            childObj2[`classId${index}`] = item
          })
          result.push({ time, week, ...childObj,...childObj2});
        }
      })
      // console.log("result===",result)
      return result;
    },
    // 行背景色
    tableRowClassName({row, rowIndex}) {
      let _week=row.week
      let _time=row.time
      if (_week === '周六' || _week === '周日') {
        return this.getBgColorName(_week,_time);
      } else {
        return 'midbg';
      }
      return '';
    },
    tableCellClassName({row, column, rowIndex, columnIndex}){
      //利用单元格的 className 的回调方法，给行列索引赋值
      row.index=rowIndex
      column.index=columnIndex
      let idx=columnIndex-2
      if(columnIndex>1){
        if(row[`teacher${idx}`]){
          return 'cellbg'
        }
      }
      if(columnIndex==0){
        let _val=row.week
        if(_val=='周六') return 'satbg-nm'
        if(_val=='周日') return 'sunbg-nm'
      }
    },
    getBgColorName(week,prm){
      let arr=prm.split(':')
      let hh=parseInt(arr[0])
      let wk=week=='周六'? 'satbg-' : 'sunbg-'
      if(hh<=12 && hh>7){
        return wk+'am'
      }else if(hh>12 && hh<=18){
        return wk+'pm'
      }else return wk+'nm'

    },
    handleCellClick(row, column, cell, event) {
      this.selectedCellIndex = {
        row,
        column
      };
      // console.log('row====',row.index)
      // console.log('column====',column.index)
      // console.log('Row data: ', row)
      // console.log('Column property: ', column.property)
      // console.log('Cell content: ', cell.textContent)
      let idx= column.property.slice(7)
      let curClassId=row[`classId${idx}`]
      this.$router.push({path:'/classManage/studentJoinClass',query:{classId:curClassId}})
    },
    cellBackgroundColor({
      row,
      column
    }) {
      if (row === this.selectedCellIndex.row && column === this.selectedCellIndex.column) {
        return 'lightblue';
      }
    },
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.mergedColumns.forEach(column => {
            this.spanMap[column] = {
              spanArr: [1],
              pos: 0
            }
          })
        } else {
          this.mergedColumns.forEach(column => {
            if (data[i][column] === data[i - 1][column] && data[i][column]) {
              this.spanMap[column].spanArr[this.spanMap[column].pos] += 1;
              this.spanMap[column].spanArr.push(0)
            } else {
              this.spanMap[column].spanArr.push(1);
              this.spanMap[column].pos = i;
            }
          })
        }
      }
    },
    objectSpanMethod({
      column,
      rowIndex
    }) {
      if (this.spanMap[column.property]) {
        const _row = this.spanMap[column.property].spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
  }
};
</script>

<style>
.el-table .hdbg{
  background-color: #82a8cc !important;
  color: black
}
.el-table .midbg{
  background: #e6d9b7;
}

.el-table .satbg-am {
  background: #e3cdc0;
}
.el-table .satbg-pm {
  background: #e0b79c;
}
.el-table .satbg-nm {
  background: #dd9f7a;
}
.el-table .sunbg-am {
  background: #c6d2de;
}
.el-table .sunbg-pm {
  background: #aac0d6;
}
.el-table .sunbg-nm {
  background: #8caed0;
}
.el-table .cellbg{
  background-color: #97bc80;
  padding: 10px;
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
// 去掉表格的鼠标悬浮的效果
::v-deep .el-table tbody tr:hover > td,
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td,
::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: transparent  !important;
}
// 去掉表格的边框
// ::v-deep .el-table td.el-table__cell {
//   border-bottom: 0px !important;
// }
// ::v-deep .el-table--border .el-table__cell {
//   border-right: 0px !important;
// }
::v-deep .el-table{
  color: black
}
</style>

fangcaojushi

关注

24
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
按老师展示的教学排课表

按老师展示的教学排课表，周一到周五背景黄，周六背景桔，周日背景蓝，上午、下午、晚上浅入深的三色，相同的课合并单元格，有课的背景为绿色，并且点击跳转路由，进入该班的学生情况页。【说明】单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。【说明】表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的className。【说明】行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
复制链接

扫一扫