Vue生成类似于打卡页面

数据表格
<el-table :data="tableData" border height="calc(100vh - 240px)" :cell-style="cellFun"><el-table-column label="姓名" show-overflow-tooltip prop="name" align="center"/><el-table-column label="手机号" show-overflow-tooltip prop="phone" align="center"/><el-table-column label="性别" show-overflow-tooltip prop="sex" align="center"/><el-table-column v-for="(item,index) in columns" :key="index" :label="''+item.label+''" :prop="item.name" align="center" width="40"><template slot-scope="scope"></template></el-table-column></el-table><pagination :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total" @pagination="loadData"/>
设置单元格样式的方法
如果内部值大于0,则显示背景为绿色
cellFun({row, column, rowIndex, columnIndex}) {if (columnIndex != 0 && columnIndex != 1) {let key = column.propertyif (row[key] > 0) {return {backgroundColor: '#65b00d'}}}},
数据加载的方法
// queryParams: { //参数
// projectId: '',
// yearMonthBy: '',
// pageNum:1,
// pageSize:10
// }, //数据加载loadData() {getList(this.queryParams).then(res => {/**动态列的创建*/let date = new Date(this.queryParams.yearMonthBy)let days = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()this.columns = []// let dates = []//根据所选的年月生成具体的天数据for (let i = 1; i <= days; i++) {let m = date.getMonth() + 1let time = date.getFullYear() + '-' + (m > 9 ? m : '0' + m) + '-' + (i > 9 ? i : '0' + i)this.columns.push({label: i, name: 'a' + i, date: time})// dates.push(date.getFullYear() + '-' + (m > 9 ? m : '0' + m) + '-' + (i + 1 > 9 ? i : '0' + i))}console.log(this.columns)/**end*/const data = res.rows/**补全每条数据*/for (let i = 0; i < data.length; i++) {for (let j = 0; j < this.columns.length; j++) {data[i][this.columns[j].name] = 0}}/**end*//**数据匹配*///这里逻辑可以跟随自己的变更,usedDates就是你打卡的日期字符串//例如"2022-01-01","2022-01-02"for (let i = 0; i < data.length; i++) {if (data[i].usedDates) {const usedDateList = data[i].usedDates.split(",");for (let j = 0; j < usedDateList.length; j++) {for (let k = 0; k < this.columns.length; k++) {if (usedDateList[j] == this.columns[k].date) {data[i][this.columns[k].name] = 1break}}}}}/***/console.log(data)this.tableData = datathis.total = res.total})},
相关文章:
Vue生成类似于打卡页面
数据表格 <el-table :data"tableData" border height"calc(100vh - 240px)" :cell-style"cellFun"><el-table-column label"姓名" show-overflow-tooltip prop"name" align"center"/><el-table-co…...
软件工程——期末复习(2)
Part1:软件工程基本概念 软件程序文档数据 在软件工程中,软件通常被定为程序、文档和数据的集合。程序是按事先设计的功能和性能要求编写的指令序列;程序是完成指定功能的一段特定语言代码。文档是描述程序操作和使用的文档,是与…...
vxe-table 键盘操作,设置按键编辑方式,支持覆盖方式与追加方式
vxe-table 全键盘操作,按键编辑方式设置,覆盖方式与追加方式; 通过 keyboard-config.editMode 设置按键编辑方式;支持覆盖方式编辑和追加方式编辑 安装 npm install vxe-pc-ui4.3.15 vxe-table4.9.15// ... import VxeUI from v…...
【BUG】VMware|vmrest正在运行此虚拟机,无法配置或删除快照
VMware版本:VMware 16 文章目录 省流版问题解决方案 详细解释版问题解决方案总结 省流版 问题 只读,因为vmrest正在运行虚拟机。 解决方案 参考:虚拟机设置,只读,因为vmrest正在运行此虚拟机。有谁遇到过这种问题吗&…...
STM32 串口和I2C结合案例:
需求 1. 电脑通过串口 给单机 下发点灯计划 例如 13322 单片机上的灯 LED1 亮1秒 灭1秒 LED3 亮1秒 灭1秒 LED3 亮一秒 灭1秒 133221332213322-> mian.c #include "usart1.h" #include "M24C02.h" #include "stdio.h" #include "le…...
QT6_UI设计——设置表格
环境:qt6.8 1、放置 双击 2行 、列 设置 3、设置表格内容 读取表格内容 uint16 get_table_value_16_cmd(int row,int column) {if(column<1)return 0;QTableWidgetItem *itemnew QTableWidgetItem;itemui1->tableWidget_2->item(row,column);if(item! nul…...
游戏使用辅助工具修改器检测不到游戏进程应该如何解决?多种解决方法分享
当您在使用游戏辅助工具或修改器时遇到“未检测到游戏进程”的提示,这通常意味着修改器未能正确识别并连接到游戏的运行实例。以下是一些可能的解决方案: 1. 确保游戏已启动:•确认游戏已经完全启动并且正在运行中。有时游戏可能还在加载界面…...
Java JVM(内存结构,垃圾回收,类加载,内存模型)
一、JVM 主要功能 1. 什么是 jvm? JVM(Java Virtual Machine):负责运行 Java 程序的核心组件。它将 Java 字节码(.class 文件)解释或编译为机器代码,并提供内存管理、垃圾回收和线程管理等功能。 JRE (J…...
C++设计模式(桥接、享元、外观、状态)
一、桥接模式 1.定义 将抽象部分与它的实现部分分离,使它们可以独立地变化。 桥接模式通过使用组合关系而不是继承关系来实现解耦,从而提高系统的灵活性和可扩展性。 2.组成 抽象:定义抽象部分的接口,包含一个指向实现类的对象…...
鸿蒙 DevEco Studio 设置状态栏,调用setWindowSystemBarProperties不生效
参考文章:设置状态栏,调用setWindowSystemBarProperties不生效 我使用 setWindowSystemBarProperties 设置状态栏,不生效。 import window from ohos.window;export default {data: {title: World},setSystemBar() {var windowClass null;…...
Spring03——基于xml的Spring应用
Spring开发中主要对Bean的配置 Bean的常用配置一览如下: Xml配置方式功能描述<bean id"" class"">Bean的id和全限定名配置<bean name"">通过name设置Bean的别名,通过别名也能直接获取到Bean实例<bean sc…...
【AIGC半月报】AIGC大模型启元:2024.12(上)
【AIGC半月报】AIGC大模型启元:2024.12(上) (1)OpenAI-12日发布会(持续更新中........)Day01-12.06:SoraDay02-12.07:ChatGPT圣诞老人风格的语音Day03-12.08:…...
本etcd系列文章补充说明
最开始今年四月份读的是etcdv3.6的main分支的代码,最开始没注意,main分支代码是不断修改的,并且最开始对etcd不太了解,所以源码笔记有些理解不太准确,也可能略有错误,所以年底就回过头来重新复习一遍&#…...
【新品发布】ESP32-P4开发板 —— 启明智显匠心之作,为物联网及HMI产品注入强劲动力
核心亮点: ESP32-P4开发板,是启明智显精心打造的一款高性能物联网开发板。它专为物联网项目及HMI(人机界面)产品而设计,旨在为您提供卓越的性能和稳定可靠的运行体验。 强大硬件配置: 双核400MHz RISC-V处…...
HTML 添加 文本水印
body,html {margin: 0;height: 100vh;width: 100vw;} // 自定义文案const setting {text: "水印文案", // 水印内容innerDate: true, // 在水印下方增加日期width: 110, // 水印宽度};// 自定义文字水印const watermark (function () {return {build: function (a…...
软件无线电安全之GNU Radio基础(下)
往期回顾 软件无线电安全之GUN Radio基础(上) 背景 在上一小节中,我们简单介绍和使用了GNU Radio软件的基础功能和模块,同时通过GNU Radio Companion(GRC)创建了简单的流程图,展示了信号生成、处理和输出的流程。最后…...
windows基础
系统目录 服务 端口 注册表 黑客常用DOS命令(在拿到shell时会用到) 一、 系统目录 Windows目录 系统的安装目录 System32configSAM文件 是用户密码的存储文件 System32etchost文件 记录本地解析(优先级大于DNS域名解析)可以自…...
hhdb数据库介绍(10-43)
安全 密码安全管理 密码安全管理为用户提供了对计算节点数据库用户与存储节点的连接用户、备份用户的密码有效期监控提醒。到期后自动提示用户修改密码以提升系统的安全性。 数据库用户密码 (一)密码修改 用户可以在“安全->密码安全管理->数据…...
JMS和消息中间件:Kafka/RocketMQ
文章目录 消息传递模型使用JMS还是KafkaKafka与RocketMQ的优缺点Kafka与RocketMQ的使用场景Kafka与RocketMQ的选型指南 TPM 项目中, iflow之间使用了JMS,后端项目与数据库通信使用Kafka MQ和JMS的区别: JMS是 java 用来处理消息的一个API规范…...
【问题解决】ArcgisGP工具使用GIS模块自动发布图层报错:过渡失败
项目场景: 使用Arcpy脚本发布GP工具服务,该工具结果生成一个矢量文件,并且需要自动发布成在线图层,脚本中已经包含了自动发布图层的代码,本地在ArcgisPro中执行成功。现在需要将该工具发布成web工具。 问题描述 在…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入,一个是通过INMP441麦克风模块采集音频,一个是通过PCM5102A模块播放音频,那如果我们将两者结合起来,将麦克风采集到的音频通过PCM5102A播放,是不是就可以做一个扩音器了呢…...
从零实现STL哈希容器:unordered_map/unordered_set封装详解
本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说,直接开始吧! 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径,但是vite中默认不可以。 如何实现: vite中提供了resolve.alias:通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...
论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing
Muffin 论文 现有方法 CRADLE 和 LEMON,依赖模型推理阶段输出进行差分测试,但在训练阶段是不可行的,因为训练阶段直到最后才有固定输出,中间过程是不断变化的。API 库覆盖低,因为各个 API 都是在各种具体场景下使用。…...
【LeetCode】算法详解#6 ---除自身以外数组的乘积
1.题目介绍 给定一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O…...
springboot 日志类切面,接口成功记录日志,失败不记录
springboot 日志类切面,接口成功记录日志,失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...
Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合
作者:来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布,Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明,Elastic 作为 …...
React父子组件通信:Props怎么用?如何从父组件向子组件传递数据?
系列回顾: 在上一篇《React核心概念:State是什么?》中,我们学习了如何使用useState让一个组件拥有自己的内部数据(State),并通过一个计数器案例,实现了组件的自我更新。这很棒&#…...
