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

el-table 纵向垂直表头

<template><div class="element-main"><div> Element-ui 官方提供 table Demo</div><el-tableborderstyle="width: 100%":data="tableData"><el-table-column prop="courseName" label="课程信息" width="180"></el-table-column><el-table-column prop="courseBook" label="教材信息" width="180"></el-table-column><el-table-column prop="price" label="单价"></el-table-column></el-table><div>===================================== 分割线 =====================================</div><div>行列转换后的 Demo</div><el-tableborderstyle="width: 100%":data="getValues":show-header="false"><el-table-columnv-for="(item, index) in getHeaders":key="index":prop="item"></el-table-column></el-table></div>
</template><script>
export default {data() {return {headers: [{prop: 'courseName',label: '课程信息'},{prop: 'courseBook', label: '教材信息'},{prop: 'price',label: '单价'},],tableData:[{"courseId": 1,"courseName": "英语写作", "courseBook": "英语写作基础教程","price": 3500},{"courseId": 2,"courseName": "综合英语(三)",": "新编英语教程2","price": 3350}, {"courseId": 3,"courseName": "英语国家社会与文化","courseBook": "致用英语 英语国家概况 (第二版)","price": 2900 },{"courseId": 3,"courseName": "英语国家社会与文化","courseBook": "致用英语 英语国家概况 (第二版)","price": 2900,}],}},computed: {getHeaders() {return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])},getValues() {return this.headers.map(item => {return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});});}},
};
</script>

参考链接:https://www.jianshu.com/p/1f38eaffd070

相关文章:

el-table 纵向垂直表头

<template><div class"element-main"><div> Element-ui 官方提供 table Demo</div><el-tableborderstyle"width: 100%":data"tableData"><el-table-column prop"courseName" label"课程信息&qu…...

python/pytorch读取数据集

MNIST数据集 MNIST数据集包含了6万张手写数字&#xff08;[1,28,28]尺寸&#xff09;&#xff0c;以特殊格式存储。本文首先将MNIST数据集另存为png格式&#xff0c;然后再读取png格式图片&#xff0c;开展后续训练 另存为png格式 import torch from torch.utils.data impor…...

IT安全:实时网络安全监控

了解庞大而复杂的网络环境并非易事&#xff0c;它需要持续观察、深入分析&#xff0c;并对任何违规行为做出快速反应。这就是为什么实时网络安全监控工具是任何组织 IT 安全战略的一个重要方面。 网络攻击和合规性法规是 IT 安全的两个主要驱动因素。同时&#xff0c;数据泄露…...

SQL server使用profiler工具跟踪语句

1.打开SQL server工具&#xff0c;在工具点击SQL server Profiler : 2.流程&#xff1a;暂停——清空———点击接口——启用&#xff1a; 3.找到对应的sql语句&#xff0c;复制到查询界面&#xff0c;开始查询数据&#xff1a;...

python实现一维傅里叶变换——冈萨雷斯数字图像处理

原理 傅立叶变换&#xff0c;表示能将满足一定条件的某个函数表示成三角函数&#xff08;正弦和/或余弦函数&#xff09;或者它们的积分的线性组合。在不同的研究领域&#xff0c;傅立叶变换具有多种不同的变体形式&#xff0c;如连续傅立叶变换和离散傅立叶变换。最初傅立叶分…...

表单(HTML)

<!DOCTYPE html> <html><head><meta charset"utf-8"><title>个人信息</title></head><body><h1>个人信息</h1><form><fieldset><legend>基本信息</legend><label for"…...

spripng 三级缓存,三级缓存的作用是什么? Spring 中哪些情况下,不能解决循环依赖问题有哪些

文章目录 前面有提到三级缓存&#xff0c;三级缓存的作用是什么&#xff1f;Spring 中哪些情况下&#xff0c;不能解决循环依赖问题&#xff1a; 前面有提到三级缓存&#xff0c;三级缓存的作用是什么&#xff1f; 上一篇&#xff1a;https://blog.csdn.net/weixin_44797327/a…...

elasticsearch系列六:索引重建

概述 我们再起初创建索引的时候由于数据量、业务增长量都并不大&#xff0c;常常不需要搞那么多分片或者说某些字段的类型随着业务的变化&#xff0c;已经不太满足未来需求了&#xff0c;再或者由于集群上面索引分布不均匀导致节点直接容量差异较大等等这些情况&#xff0c;此时…...

GitOps实践指南:GitOps能为我们带来什么?

Git&#xff0c;作为开发过程中的核心工具&#xff0c;提供了强大的版本控制功能。即便在写代码的时候稍微手抖一下&#xff0c;我们也能通过 Git 的差异对比&#xff08;diff&#xff09;轻松追踪到庞大工程中的问题&#xff0c;确保代码的准确与可靠。这种无与伦比的自省能力…...

D3485国产芯片+5V工作电压, 内置失效保护电路采用SOP8封装

D3485是一款5V供电、半双工的RS-485收发器&#xff0c;芯片内部包含一路驱动器和路接收器。D3485使用限摆率驱动器&#xff0c;能显著减小EMI和由于不恰当的终端匹配电缆所引起的反射&#xff0c;并实现高达10Mbps的无差错数据传输。D3485内置失效保护电路&#xff0c;保证接收…...

devops使用

官方文档 使用 Git 进行代码 - Azure DevOps | Microsoft Learn...

AI训练师常用的ChatGPT通用提示词模板

AI模型选择&#xff1a;如何选择合适的AI模型&#xff1f; 数据集准备&#xff1a;如何准备用于训练的数据集&#xff1f; 数据预处理&#xff1a;如何对待训练数据进行预处理&#xff1f; 特征工程&#xff1a;如何进行特征选择和特征工程&#xff1f; 超参数调整&#xf…...

Java加密算法工具类(AES、DES、MD5、RSA)

整理了有关加密算法工具类&#xff0c;结合了几个博客以及自己改良后可直接使用&#xff0c;主要介绍以下四种加密方式&#xff1a;AES、DES、MD5、RSA&#xff0c;详细介绍都在注释里面有讲。 一、AES import com.alibaba.fastjson.JSONObject; import java.nio.charset.Sta…...

探索Go语言的魅力:一门简洁高效的编程语言

介绍Go语言&#xff1a; Go&#xff0c;也被称为Golang&#xff0c;是由Google开发的一门开源编程语言。它结合了现代编程语言的优点&#xff0c;拥有高效的并发支持和简洁的语法&#xff0c;使其成为构建可伸缩、高性能应用的理想选择。 Go语言的特性&#xff1a; 并发编程…...

【用unity实现100个游戏之19】制作一个3D传送门游戏,实现类似鬼打墙,迷宫,镜子,任意门效果

最终效果 文章目录 最终效果素材第一人称人物移动开门效果显示原理渲染相机跟着我们视角移动门的摄像机跟着我们旋转近裁剪面设置传送配置代码实现传送效果结束完结素材 https://assetstore.unity.com/packages/3d/props/interior/door-free-pack-aferar-148411...

DRF(Django Rest Framework)框架基于restAPI协议规范的知识点总结

Django Rest Framework学习 一、初识DRF组件 1.1 FBV和CBV FBV&#xff1a;function based view from django.shortcuts import render, HttpResponse # 这种是基于FBV模式 函数模式实现Views函数 def login(request):if request.method GET:return HttpResponse("Get…...

Linux磁盘与文件系统管理

目录 在linux系统中使用硬盘 磁盘的数据结构 磁盘接口类型 字母含义 MBR磁盘分区 分区类型 分区的缺点 文件系统的 文件系统有什么作用 文件系统的修复 检测并确认新磁盘 参看磁盘信息 查看磁盘信息 添加磁盘 查看添加磁盘情况&#xff1a;sda系统磁盘&#xff…...

数字魔法AI绘画的艺术奇迹-用Stable Diffusion挑战无限可能【文末送书-12】

文章目录 前言一. 技术原理1.1 发展历程 二.对艺术领域的影响三. 挑战与机遇四.AI魔法绘画&#xff1a;用Stable Diffusion挑战无限可能【文末送书-12】4.1 粉丝福利&#xff1a;文末推荐与福利免费包邮送书&#xff01; 前言 随着人工智能技术的迅猛发展&#xff0c;AI在各个…...

【docker实战】02 用docker安装mysql

本示例采用bitnami的镜像进行安装MySQL 一、镜像搜索 先搜索一下mysql有哪些镜像 [rootlocalhost ~]# docker search mysql NAME DESCRIPTION STARS OFFICIAL AUTOMATED mysql …...

循环渲染ForEach

目录 1、接口说明 2、键值生成规则 3、组件创建规则 3.1、首次渲染 3.2、非首次渲染 4、使用场景 4.1、数据源不变 4.2、数据源组项发生变化 4.3、数据源数组项子属性变化 5、反例 5.1、渲染结果非预期 5.2、渲染性能降低 Android开发中我们有ListView组件、GridVi…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...