当前位置：首页 > news >正文

基于vue和elementui的简易课表

news 来源：原创 2025/5/19 20:02:46

本文参考基于vue和elementui的课程表_vue实现类似课程表的周会议列表-CSDN博客，原程序在vue3.5.13版本下不能运行，修改两处：

1）slot-cope改为v-slot

2）return '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）增加中午两节课

源程序如下：

<template><div><div class="panel"><el-table :data="timetable" :span-method="objectSpanMethod" border=true:header-cell-style="{background:'#d9e5fd', color:'black'}":cell-style="tableCellStyle"><el-table-column prop="sjd" label="📅" width="60" align="center"><template v-slot="scope"><div v-html="scope.row.sjd.course"></div></template></el-table-column><el-table-column prop="jc" label="节次" width="60" align="center"></el-table-column><el-table-column prop="mon" label="星期一" width="95" align="center"><template v-slot="scope"><div v-html="scope.row.mon.course"></div></template></el-table-column><el-table-column prop="tue" label="星期二" width="95" align="center"><template v-slot="scope"><div v-html="scope.row.tue.course"></div></template></el-table-column><el-table-column prop="wed" label="星期三" width="95" align="center"><template v-slot="scope"><div v-html="scope.row.wed.course"></div></template></el-table-column><el-table-column prop="thu" label="星期四" width="95" align="center"><template v-slot="scope"><div v-html="scope.row.thu.course"></div></template></el-table-column><el-table-column prop="fri" label="星期五" width="95" align="center"><template v-slot="scope"><div v-html="scope.row.fri.course"></div></template></el-table-column><el-table-column prop="sat" label="星期六" width="70" align="center"><template v-slot="scope"><div v-html="scope.row.sat.course"></div></template></el-table-column><el-table-column prop="sun" label="星期日" width="70" align="center"><template v-slot="scope"><div v-html="scope.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 j=0;j< this.events[i].last ;j++)this.timetable[this.events[i].start - 1+j][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(rowIndex===row[column.property].start-1){obj = {rowspan: row[column.property].last,colspan: 1}}elseobj = {rowspan: 0,colspan: 0};}return obj;},  }
}
</script>

调用：

<timetable  :length="14" > </timetable>

基于vue和elementui的简易课表

本文参考基于vue和elementui的课程表_vue实现类似课程表的周会议列表-CSDN博客，原程序在vue3.5.13版本下不能运行，修改两处： 1）slot-cope改为v-slot 2）return background-color:rgb(24 144 255 / 80%);color: #fff; …...

编程日记 2025/5/19 20:02:46

vim的多文件操作

[rootxxx ~]# vim aa.txt bb.txt cc.txt #多文件操作 next #下一个文件 prev #上一个文件 first #第一个文件 last #最后一个文件快捷键: ctrlshift^ #当前和上个之间切换说明：快捷键ctrlshift^&#xff0c…...

编程日记 2025/5/19 19:16:52

spring spring-boot spring-cloud发布以及适配

https://spring.io/blog/2024/10/01/from-spring-framework-6-2-to-7-0 看了 spring 的官网，提到 2025 年 spring 会跟随 jdk 25 LTS发布后，接着发布 Spring Framework 7.0 GA，与之对应 spring 系列的组件版本情况如下。 Spring Framework版…...

编程日记 2025/5/17 4:48:38

【快速上手】阿里云百炼大模型

为了创建自己的知识库，本文介绍一下阿里云的百炼大模型，方便大家快速上手！快速查询自己想要的内容。一、入口页阿里云登录 - 欢迎登录阿里云，安全稳定的云计算服务平台二、大模型的选择首先前提条件是 1、账号不能欠费 2、需…...

编程日记 2025/5/19 20:00:51

Linux：多线程[2] 线程控制

了解： Linux底层提供创建轻量级进程/进程的接口clone，通过选择是否共享资源创建。 vfork和fork都调用的clone进行实现，vfork和父进程共享地址空间-轻量级进程。库函数pthread_create调用的也是底层的clone。 POSIX线程库与线程有关的函数构…...

编程日记 2025/5/19 7:40:23

文章目录添加依赖配置PageHelper项目中使用PageHelper注意事项 PageHelper分页插件介绍 https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/en/HowToUse.md 使用方法添加依赖 <dependency><groupId>com.github.pagehelper</groupId>&l…...

编程日记 2025/5/19 20:00:50

【huawei】云计算的备份和容灾

目录 1 备份和容灾 2 灾备的作用？ ① 备份的作用 ② 容灾的作用 3 灾备的衡量指标 ① 数据恢复时间点（RPO，Recoyery Point Objective） ② 应用恢复时间（RTO，Recoyery Time Objective） 4…...

编程日记 2025/5/19 19:05:29

CVE-2023-38831 漏洞复现：win10 压缩包挂马攻击剖析

目录前言漏洞介绍漏洞原理产生条件影响范围防御措施复现步骤环境准备具体操作前言在网络安全这片没有硝烟的战场上，新型漏洞如同隐匿的暗箭，时刻威胁着我们的数字生活。其中，CVE - 2023 - 38831 这个关联 Win10 压缩包挂…...

编程日记 2025/5/19 19:39:16

回顾：Maven的环境搭建

1、下载apache-maven-3.6.0 **网址:**http://maven.apache.org 然后解压到指定的文件夹（记住文件路径） 2、配置Maven环境复制bin文件夹的路径D:\JavaTool\apache-maven-3.6.0\bin 环境配置成功 3、检查是否配置成功 winR 输入cmd 命令行输入mvn -v…...

编程日记 2025/5/19 19:18:24

从零到全栈开发

HTML：超文本标记语言 CSS：层叠样式表 HTML可以理解为框架----（毛坯房） CSS 可以理解为装修----（装修） 学习工具： Vscode应用----扩展（中文） AI ----KiMi ，豆…...

编程日记 2025/5/19 18:47:39

单片机-STM32 WIFI模块--ESP8266 (十二)

1.WIFI模块--ESP8266 名字由来： Wi-Fi这个术语被人们普遍误以为是指无线保真（Wireless Fidelity），并且即便是Wi-Fi联盟本身也经常在新闻稿和文件中使用“Wireless Fidelity”这个词，Wi-Fi还出现在ITAA的一个论文中。…...

编程日记 2025/5/19 19:06:54

两种交换排序算法--冒泡，快速

目录 1.冒泡排序原理 2.快速排序原理 3.冒泡代码实现 4.快速排序代码实现 1.冒泡排序原理冒泡排序（Bubble Sort）是一种简单的排序算法，基本思想是通过反复交换相邻的元素，直到整个序列有序。它的名字来源于较大的元素像气泡…...

编程日记 2025/5/19 18:47:39

langchain基础（一）

模型又可分为语言模型（擅长文本补全，输入和输出都是字符串）和聊天模型（擅长对话，输入时消息列表，输出是一个消息）两大类。以调用openai的聊天模型为例，先安装langchain_openai库 1…...

编程日记 2025/5/18 21:19:40

【学术会议征稿】第五届能源、电力与先进热力系统学术会议（EPATS 2025）

能源、电力与先进热力系统设计是指结合物理理论、工程技术和计算机模拟，对能源转换、利用和传输过程进行设计的学科领域。它涵盖了从能源的生产到最终的利用整个流程，旨在提高能源利用效率，减少能源消耗和环境污染。重要信息官网&#xf…...

编程日记 2025/5/19 18:35:08

MyBatis框架基础学习及入门案例(2)

目录一、数据库建表(tb_user)以及添加数据。 （1）数据库与数据表说明。 （2）字段与数据说明。二、创建模块(或工程)、导入对应所需依赖坐标。三、编写MyBatis核心主配置文件。(解决JDBC中"硬编码"问题) （1&…...

编程日记 2025/5/19 19:05:29

Salesforce Too Many Email Invocations: 11

在 Salesforce 中，“Too Many Email Invocations: 11” 错误通常表示您的组织在单个事务中超过了 Apex 电子邮件调用的限制。Salesforce 设置这些限制是为了防止滥用并确保公平使用。以下是解决该问题的方法： 理解限制 Salesforce 允许每个事务中最多进…...

编程日记 2025/5/19 19:45:34

2274. 不含特殊楼层的最大连续楼层数

2274. 不含特殊楼层的最大连续楼层数题目链接：2274. 不含特殊楼层的最大连续楼层数代码如下： class Solution { public:int maxConsecutive(int bottom, int top, vector<int>& special) {ranges::sort(special);int res max(special[0] …...

编程日记 2025/5/19 12:40:08

RGB 转HSV空间颜色寻找色块

文章目录前言一、绿色确定二、红色确定总结前言提示：这里可以添加本文要记录的大概内容： 项目需要： 将RGB颜色空间转换为HSV颜色空间以寻找颜色，主要基于以下几个原因： 直观性： HSV颜色空间更符合人类…...

编程日记 2025/5/16 21:20:54

Kafka生产者ACK参数与同步复制

目录生产者的ACK参数 ack等于0 ack等于1（默认） ack等于-1或all Kafka的同步复制使用误区生产者的ACK参数 Kafka的ack机制可以保证生产者发送的消息被broker接收成功。 Kafka producer有三种ack机制 ，分别是 0，1&#xf…...

编程日记 2025/5/14 10:21:42

计算机图形学试题整理（期末复习/闭or开卷/＞100道试题/知识点）

1.各种坐标变换，会产生变换前后维度改变的是（投影变换）。 A）建模变换；B）观察变换；C）投影变换；D）视口变换不同的坐标变换对维度的影响如下： 建模…...

编程日记 2025/5/16 6:47:15

Ubuntu 24.04 安装 NVIDIA Container Toolkit 全指南：让Docker拥抱GPU

Ubuntu 24.04 安装 NVIDIA Container Toolkit 全指南：让Docker拥抱GPU 前言一、环境准备1.1 验证驱动状态二、安装NVIDIA Container Toolkit2.1 添加官方仓库2.2 执行安装三、配置Docker运行时3.1 更新Docker配置四、验证安装结果4.1 运行测试容器五、实战应用 …...

编程日记 2025/5/16 10:34:02

python3+TensorFlow 2.x（三）手写数字识别

目录代码实现模型解析： 1、加载 MNIST 数据集： 2、数据预处理： 3、构建神经网络模型： 4、编译模型： 5、训练模型： 6、评估模型： 7、预测和可视化结果： 输出结果&#xff…...

编程日记 2025/5/19 7:07:03

aws(学习笔记第二十六课) 使用AWS Elastic Beanstalk

aws(学习笔记第二十六课) 使用aws Elastic Beanstalk 学习内容： AWS Elastic Beanstalk整体架构AWS Elastic Beanstalk的hands onAWS Elastic Beanstalk部署node.js程序包练习使用AWS Elastic Beanstalk的ebcli 1. AWS Elastic Beanstalk整体架构官方的guide AWS…...

编程日记 2025/5/17 17:33:24

GestureDetector组件的功能与用法

文章目录 1 概念介绍2 使用方法3 示例代码我们在上一章回中介绍了ListView响应事件的内容,本章回中将介绍GestureDetector Widget.闲话休提，让我们一起Talk Flutter吧。 1 概念介绍我们在这里介绍的GestureDetector是一个事件响应Widget,它可以响应双击事件&…...

编程日记 2025/5/17 5:23:39

【HuggingFace项目】：Open-R1 - DeepSeek-R1 大模型开源复现计划

项目链接：https://github.com/huggingface/open-r1 概述 Open-R1 是由 HuggingFace 发布的一个完全开放的项目，旨在通过三个主要步骤复现 DeepSeek-R1 的完整训练流程。这个项目的目标是让更多人能够理解和使用 DeepSeek-R1 的技术方案，从而…...

编程日记 2025/5/17 9:57:47

K8S中数据存储之配置存储

配置存储在Kubernetes中，ConfigMap和Secret是两种核心资源，用于存储和管理应用程序的配置数据和敏感信息。理解它们的功能和最佳实践对于提高Kubernetes应用程序的安全性和配置管理的效率至关重要。 ConfigMap ConfigMap是一种API对象，允许…...

编程日记 2025/5/13 22:18:32

群辉折腾日记【连续剧】

安装群辉6.23版本对比不同的版本以及自己的硬件条件，我选择了6.2.3稳定养老版本，硬件参数可以看之前的文章：pve (群辉、软路由、win/linux)折腾日记之前年轻气盛喜欢折腾，秉持着一个原则，可以不用，但不能…...

编程日记 2025/5/11 18:23:19

AIGC视频生成模型：慕尼黑大学、NVIDIA等的Video LDMs模型

大家好，这里是好评笔记，公主号：Goodnote，专栏文章私信限时Free。本文详细介绍慕尼黑大学携手 NVIDIA 等共同推出视频生成模型 Video LDMs。NVIDIA 在 AI 领域的卓越成就家喻户晓，而慕尼黑大学同样不容小觑，…...

编程日记 2025/5/18 10:00:52

Hadoop 与 Spark：大数据处理的比较

💖 欢迎来到我的博客！ 非常高兴能在这里与您相遇。在这里，您不仅能获得有趣的技术分享，还能感受到轻松愉快的氛围。无论您是编程新手，还是资深开发者，都能在这里找到属于您的知识宝藏，学习和成长…...

编程日记 2025/5/15 8:51:29

VB6.0 显示越南语字符

近期接到客户咨询，说是VB6.0写软件界面上显示越南语乱码，需要看看怎样解决。我在自己电脑上也试了下，确实显示越南语结果是乱码。编辑器里乱码，运行起来界面上也是乱码。经过一天的折腾，算是解决了问题&#xff0c…...

编程日记 2025/5/16 9:22:23

微信小程序中实现进入页面时数字跳动效果(自定义animate-numbers组件)

微信小程序中实现进入页面时数字跳动效果 1. 组件定义,新建animate-numbers组件1.1 index.js1.2 wxml1.3 wxss 2. 使用组件 1. 组件定义,新建animate-numbers组件 1.1 index.js // components/animate-numbers/index.js Component({properties: {number: {type: Number,value…...

编程日记 2025/5/16 9:35:38

网络仿真工具Core环境搭建

目录安装依赖包源码下载 Core安装 FAQ 下载源码TLS出错误问题解决方案找不到dbus-launch 问题解决方案安装依赖包调用以下命令安装依赖包 apt-get install -y ca-certificates git sudo wget tzdata libpcap-dev libpcre3-dev \ libprotobuf-dev libxml2-de…...

编程日记 2025/5/17 21:29:10

JavaScript 的 Promise 对象和 Promise.all 方法的使用

JavaScript 中的 Promise 对象什么是 Promise? Promise 是一种用于处理异步操作的对象。它代表一个尚未完成但预计将来会完成的操作及其结果。主要特点： 状态: Pending（进行中）: 初始状态，既未成功，也未失败。Fu…...

编程日记 2025/5/17 13:00:02

农产品价格报告爬虫使用说明

农产品价格报告爬虫使用说明 # ************************************************************************** # * * # * 农产品价格报告爬虫 …...

编程日记 2025/5/14 14:39:51

Java 大视界 -- Java 大数据中的隐私增强技术全景解析（64）

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2025/5/18 18:03:09

实战Linux Swap扩展分区

文章目录定义命令格式案例注释定义 Swap分区是Linux系统中的一种虚拟内存实现方式，它是磁盘上预留的专用区域。当系统的物理内存不足时，会将部分不活跃的数据从物理内存移动到Swap分区，从而释放更多可用内存空间。命令格式关闭Swap分区…...

编程日记 2025/5/18 16:31:22

doris：Parquet导入数据

本文介绍如何在 Doris 中导入 Parquet 格式的数据文件。支持的导入方式以下导入方式支持 Parquet 格式的数据导入： Stream LoadBroker LoadINSERT INTO FROM S3 TVFINSERT INTO FROM HDFS TVF 使用示例本节展示了不同导入方式下的 Parquet 格式使用方法…...

编程日记 2025/5/19 16:16:59

Synology 群辉NAS安装（6）安装mssql

Synology 群辉NAS安装（6）安装mssql 写在前面mssql 2019:成功安装说明，这个最终成功了 mssql 2022没有成功1. pull image2.启动mssql docker container 远程连接写在前面 mssq是一个重要节点。这是因为我对mysql没有一丝好感。虽然接触了许…...

编程日记 2025/5/18 9:29:09

使用.NET 8构建高效的时间日期帮助类

使用.NET 8构建高效的时间日期帮助类在现代Web应用程序中，处理日期和时间是一个常见的需求。无论是记录日志、生成报告还是进行数据分析，正确处理日期和时间对于确保数据的准确性和一致性至关重要。本文将详细介绍如何使用ASP.NET Core和C#构建一个高效…...

编程日记 2025/5/19 10:27:28

第26篇基于ARM A9处理器用C语言实现中断＜二＞

Q：基于ARM A9处理器怎样编写C语言工程，使用按键中断将数字显示在七段数码管上呢？ A：基本原理：主程序需要首先调用子程序set_A9_IRQ_stack()初始化IRQ模式的ARM A9堆栈指针；然后主程序调用子程序config_GIC…...

编程日记 2025/5/19 8:02:59

dm8在Linux环境安装精简步骤说明(2024年12月更新版dm8)

dm8在Linux环境安装详细步骤 - - 2025年1月之后dm8 环境介绍1 修改操作系统资源限制2 操作系统创建用户3 操作系统配置4 数据库安装5 初始化数据库6 实例参数优化7 登录数据库配置归档与备份8 配置审计9 创建用户10 屏蔽关键字与数据库兼容模式11 jdbc连接串配置12 更多达梦数据…...

编程日记 2025/5/15 18:12:01

Nginx部署的前端项目刷新404问题

1，查看问题我部署的81端口是监听tlias项目的，我直接访问端口页面可以出现内容。我在浏览器舒服端口之后回车，会重定向页面。但是我在重定向之后的页面刷新浏览器就会出现404的问题。下面是刷新浏览器后的效果 2，在nginx.cnf …...

编程日记 2025/5/14 16:32:48

H2 Database安装部署

H2 Database H2 Database官网 H2 中文文档安装部署H2 java版本要高于java 11 ## 下载java21 wget https://download.oracle.com/java/21/latest/jdk-21_linux-x64_bin.tar.gz[rootlocalhost ~]# tar xf jdk-21_linux-x64_bin.tar.gz -C /usr/local/ [rootlocalhost ~]# vi…...

编程日记 2025/5/16 8:49:36

Day40：列表的排序

在 Python 中，排序是处理列表数据时常用的一种操作。排序可以帮助我们按照一定的规则（如升序或降序）对列表中的元素进行排列。Python 提供了内置的排序方法 sort() 和 sorted() 来实现这一功能。 1. 使用 sort() 方法排序 1.1 sort() 方法简…...

编程日记 2025/5/17 23:26:37

TypeScript进阶（三）：断言

文章目录一、前言二、类型断言2.1 利用 as 实现断言2.2 利用 <> 实现断言2.3 应用示例2.3.1 如果 A，B 如果是类并且有继承关系2.3.2 如果 A，B 如果是类，但没有继承关系2.3.3 如果 A 是类，B 是接口，并且 A 类实现…...

编程日记 2025/5/19 18:35:31

塔罗牌（基础）：大阿卡那牌

塔罗牌（基础） 大啊卡那牌魔术师女祭司皇后皇帝教皇恋人战车力量隐士命运之轮正义吊人死神节制恶魔高塔星星月亮太阳审判世界大啊卡那牌魔术师作为一个起点，象征：意识行动和创造力。一个【显化】的概念，即是想法变…...

编程日记 2025/5/17 21:54:02

微服务（一）

文章目录项目地址一、微服务1.1 分析User的Domian Verb和Nouns 二、运行docker和k8s2.1 Docker1. 编写dockerfile2. 创建docker image3. 运行docker使用指定端口4. 查看当前运行的镜像5. 停止当前所有运行的docker6. 删除不用的docker images7. 将本地的image上传到hub里 2.2 …...

编程日记 2025/5/19 7:25:04

JAVA(SpringBoot)集成Kafka实现消息发送和接收。

SpringBoot集成Kafka实现消息发送和接收。一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者君子之学贵一，一则明，明则有功。一、Kafka 简介 Kafka 是由 Apache 软件基金会开发的一个开源流处理平台，最初由 Link…...

编程日记 2025/5/6 7:44:41

Oracle之开窗函数使用

开窗函数是数据开发面试的必知必会，必须认真对待，上难度： 开窗函数语法格式如下，一共五部分： ①函数(a)over(②<partition by b> ③<order by c> ④<windowing_clause> ⑤开窗范围)1、函数&#xf…...

编程日记 2025/5/14 4:47:29

mysql_store_result的概念和使用案例

mysql_store_result() 是 MySQL C API 中的一个函数，用于检索一个完整的结果集到一个客户端。当执行一个查询（通常是 SELECT 查询）并希望处理所有返回的数据时，可以使用此函数。概念 mysql_store_result() 函数的原型如下&…...

编程日记 2025/5/10 13:07:29

相关文章：