网站推广存在的问题,温州网站的优化,房地产设计网站,百度不收录网站内页本文参考基于vue和elementui的课程表_vue实现类似课程表的周会议列表-CSDN博客#xff0c;原程序在vue3.5.13版本下不能运行#xff0c;修改两处#xff1a;
1#xff09;slot-cope改为v-slot
2#xff09;return background-color:rgb(24 144 255 / 80%);color: #fff; …
本文参考基于vue和elementui的课程表_vue实现类似课程表的周会议列表-CSDN博客原程序在vue3.5.13版本下不能运行修改两处
1slot-cope改为v-slot
2return background-color:rgb(24 144 255 / 80%);color: #fff; border-radius:10px 改为 return {background-color:rgb(24 144 255 / 80%), color: #fff, border-radius:20px}
改进几处
1简化表格生成算法makeTable
2改进数据填表算法mergeData
3改进单元格合并算法objectSpanMethod由原来的100多行简化为13行
4增加中午两节课
源程序如下
templatedivdiv classpanelel-table :datatimetable :span-methodobjectSpanMethod bordertrue:header-cell-style{background:#d9e5fd, color:black}:cell-styletableCellStyleel-table-column propsjd label width60 aligncentertemplate v-slotscopediv v-htmlscope.row.sjd.course/div/template/el-table-columnel-table-column propjc label节次 width60 aligncenter/el-table-columnel-table-column propmon label星期一 width95 aligncentertemplate v-slotscopediv v-htmlscope.row.mon.course/div/template/el-table-columnel-table-column proptue label星期二 width95 aligncentertemplate v-slotscopediv v-htmlscope.row.tue.course/div/template/el-table-columnel-table-column propwed label星期三 width95 aligncentertemplate v-slotscopediv v-htmlscope.row.wed.course/div/template/el-table-columnel-table-column propthu label星期四 width95 aligncentertemplate v-slotscopediv v-htmlscope.row.thu.course/div/template/el-table-columnel-table-column propfri label星期五 width95 aligncentertemplate v-slotscopediv v-htmlscope.row.fri.course/div/template/el-table-columnel-table-column propsat label星期六 width70 aligncentertemplate v-slotscopediv v-htmlscope.row.sat.course/div/template/el-table-columnel-table-column propsun label星期日 width70 aligncentertemplate v-slotscopediv v-htmlscope.row.sun.course/div/template/el-table-column/el-table/div/div
/template
script
import { colProps } from element-plus;
export default {props: {length: {type: [String, Number],default: 14}}, // 总节次data () {return {// 课程表数据timetable: [],events: [{xq: 0,course: 上午,start: 1,last:4},{xq: 0,course: 中午,start: 5,last:2},{xq: 0,course: 下午,start: 7,last:5},{xq: 0,course: 晚上,start: 12,last:3},{xq: 5,start: 1,last:2,course: br·软件工程br·3-4节br·计师23级br·8教406室br·1-16周},{xq: 1, start: 7,last:2,course: br·软工实验br·11-12节br·计师23级br·25教704室br·3-14周},{xq: 5,start: 7,last:3,course: br·集中学习br·7-8节br·计师23级br·25教1-1室br·每月第1周}],weeks: [sjd,mon, tue, wed, thu, fri, sat, sun],}},mounted () {this.mergeData()},created () {this.makeTimetable()},methods: {// 单元格添加背景色tableCellStyle (row) {if (row.row[row.column.property].course ! undefined) {return {background-color:rgb(24 144 255 / 80%), color: #fff, border-radius:20px}}},// 构造课程表完整数据makeTimetable () {this.timetable []for (let i 0; i this.length; i) {let oneRow {sjd: {},jc: i 1,mon: {},tue: {},wed: {},thu: {},fri: {},sat: {}, sun: {}}this.timetable.push(oneRow)}},mergeData () {// 合并数据for (let i 0; i this.events.length; i) {// 获取星期几let week this.weeks[this.events[i].xq ]console.log(this.events[i].last);for(var j0;j this.events[i].last ;j)this.timetable[this.events[i].start - 1j][week] this.events[i]}console.log(this.timetable);},objectSpanMethod ({ row, column, rowIndex, columnIndex }) {var obj{rowspan: 1,colspan: 1};if( row[column.property].course! undefined){if(rowIndexrow[column.property].start-1){obj {rowspan: row[column.property].last,colspan: 1}}elseobj {rowspan: 0,colspan: 0};}return obj;}, }
}
/script
调用
timetable :length14 /timetable
